ayuda con script

[debspain]

hola! necesito ayuda con un script, el caso es que tengo una imagen que segun se produce onmouseover/onmouseout a uno u otro enlace la imagen transiciona a una u otra foto. El problema es que todas las imágenes tienen tamaños diferentes, y me gustaría que al hacer la transición la capa se adaptara al tamaño de la imagen. La imagen a partir de la que transicionan las demás debe estar en una capa con posición absoluta, pues si no no funciona la transición... y a partir de este problema surge otro y es que al tener posición absoluta no puedo alinearlas en el centro tal cual... No entiendo por qué pasa esto y he intentado mejorar el script de la transición para que cada vez que se transicione a otra imagen tome el ancho de la nueva y el el ancho de la página y calcule a cuantos pixeles he de colocarla para que esté en el centro, pero no me sale.. ¿alguien me ayuda? Gracias!

[tunait]

Hola debspain tiempo sin leerte


no entendí tu pregunta

¿se puede ver en algún lado?

[debspain]

hola tunait que tal!! ;) mirate esta página, y veras lo que quiero hacer http://club.telepolis.com/debbs/fotos/fotos1.html. Esa pagina esta colocada en un iframe, cuyo ancho es el que esta ocupado en la pagina del enlace. EL problema es lo que dije, si la capa donde esta la imagen inicial la alineo en el centro y quito lo de position:absolute, la transicion no funciona, y como todas las imagenes son diferentes me gustaría que todas las imagenes a las que transicione la del medio se alineen en el centro de la página. Supongo que con la pagina sabras lo que digo. ¿me puedes ayudar? GRacias!

tunait! sacale el punto al enlace que si no da error!! sorry :S

[tunait]

ok, lo estoy miroteando

debspain, la url que me has dado es la que luego se carga dentro del iframe que comentas ¿no?

Además lo que buscas es que imagen central (la cambiante) se ajuste siempre al centro de la página ¿es así?

[debspain]

sii, la pagina que se ve con el enlace es la que se ha de cargar en el iframe de otra pagina (que me es imposible enseñar ahora). EN el centro hay una imagen fija que cambia en funcion de la imagen en la que se produzca el onmouseover/out, y quiero que todas las imagenes que puedan aparecer en el centro queden alineadas en medio de la página.

LA función que produce la transición es:
function transicion(img)
{
bustaimg.filters.blendTrans.apply();
document.images.bustaimg.src = img;
bustaimg.filters.blendTrans.play();
}

Y yo intentaba incluir en esta función la instrucción para centrar la imagen así:

anchoimg=bustaimg.style.height; //bustaimg es la propiedad name de la imagen que hay fija en el centro inicialmente
bustaimg.style.left= (a - anchoimg) /2; //a es el ancho de la pagina

Ya ves que no soy muy experta en el tema, pero es lo que se me ocurrió.

perdon, de eso ultimo en realidad era anchoimg=bustaimg.style.width, pero tambien intentaba hacer pruebas con la propiedad height y ahi se me quedó sin darme cuenta.

[tunait]

Bueno.... supongo que yá sabes que algunas imágenes son tan grandes que ocultan los thumbnails y automáticamente se pierde el contacto con alguno y se crea automáticamente un estado de mouseout.

La solución más sencilla habría sido meter la capa a posición left 0 y un width del 100% y dentro una tabla con una sola celda con alineación vertical y horizontal centrada y ahí la imagen. Eso habría centrado automáticamente las imágenes

Pero para eso habría que haber contemplado los z-index etc desde un principio.


Lo que hice entonces es simplemente tomar tu propia idea de que la capa se centre automáticamente, pero no hace falta que modifiques la función que estás usando, vamos a usar un funcioncilla nueva de una forma muy sencilla, verás.

Agrega esta función a tu script

function centra(ancho)
{
anchDoc = screen.availWidth
document.getElementById('bustaimg').style.left = (anchDoc-ancho)/2
}

Y luego a la imagen bustaimg le pones esto

<img src="../img/fotos/conciertos/busta.jpg" name="bustaimg" style="filter:blendTrans(duration=1)" onload="centra(this.width)">

Y listos.

Pruebas y me dices si te sirve?

----------------------------------....unos minutillos más tarde.... -------------------------------------------------------

leches, no me acordaba que va en un iframe, así que el screen.availWidth dará posición inexacta....


¿Cuál era la propiedad para averiguar el tamaño de una ventana?? ¿alguien se acuerda?? (para NS es innerWidth, pero no encuentro el truco para el exploter )

--------------------------------------------- ... otros cuantos minutillos más tarde.... --------------------------------------

Vale, a ver si te furula así

function centra(ancho)
{
if(navigator.appName == "Netscape")
{anchDoc = window.innerWidth}
else{anchDoc = parent.document.all.nombreDeIframe.width}
document.getElementById('Layer1').style.left = (anchDoc-ancho)/2
}


cambia nombreDelIframe por el nombre de tu iframe.

El resto igual

[debspain]

tunait! eres mi salvación casi siempre ;)! Muchisimas gracias, todo funciona a la perfección.. Ahora me falta hacer que las imágenes se vean más pequeñas cuando se muestran en la transición...

Te queria comentar una cosilla, me has dicho antes que lo ideal hubiera sido dar 100% a la propiedad width de la capa contenedora de la imagen y 0 a la propiedad left y luego centrar la imagen en la capa.. pues yo lo hice y no centraba ninguna imagen No entiendo por qué.. ni tampoco porque no funciona la transición cuando la capa no tiene posición absoluta. ¿tienes idea de por qué pasa?

Otra cosilla, ya la puse en otro post pero nadie respondió, a ver si puedes ayudarme. En el enlace que puse al principio cuando pasas el mouse por encima de los cuadradillos (que en principio deben ser flechas hacia arriba y hacia abajo ;)) de una misma hilera de imágenes, y pasa siempre, una parte de la capa que contiene la hilera de imágenes se esconde :S (la curiosidad es que siempre pasa cuando la capa que intentamos mover es la segunda capa de la que queremos visualizar las imágenes).
Gracias!

[tunait]

Te respondo por partes

primero la parte que no necesito mirar ni probar nada:

Te queria comentar una cosilla, me has dicho antes que lo ideal hubiera sido dar 100% a la propiedad width de la capa contenedora de la imagen y 0 a la propiedad left y luego centrar la imagen en la capa.. pues yo lo hice y no centraba ninguna imagen No entiendo por qué..

Por que las capas no centran horizontalmente(salvo que pongas la imagen entre <div align="center">) ni verticalmente.

La idea es que dentro de la capa al 100% de ancho (y de alto si quieres alinear vertical) vaya una tabla al 100% de ancho (y de alto, si quieres también centrar verticalmente) y a la única celda darle un align="center"

Voy a echar un ojo a lo otro que preguntas a ver qué veo

....por cierto,

me fijé en que le das a la capa contenedora de la imagen principal que le dabas el atributo align="center"

Esto no lo he leído en ninguna parte, pero sí lo he comprobado.

Cuando trato de usar div para centrar o alinear a la izquierda o derecha he de usar ese div sólo para eso (bueno sí que se le pueden pedir otras cosas, pero no como capa).

Si el div es para crear una capa, no le sirve el atributo align="center"

Así si quieres una capa centrada necesitarías dos div

<div align="center">
<div id="pepe" style="position:absolute; etc">

Contenidos

</div>
</div>

Pruébalo

[debspain]

ok tunait, lo he probado de las dos maneras, y funciona genial, salvo por un detallito y es que el filtro radial no funciona si no tiene posicion absoluta
Me parece que javascript no quiere cuentas conmigo... ;)
Gracias por ayudarme!

[tunait]

Pero tu capa sigue teniendo una posición absoluta. A 0 pixels desde la izquierda, pero absoluta.

Estoy haciendome una copia de tu página a local pa poder mirotearlo mejor.

Guardando las imágenes me equivoqué y le dí a "establecer como papel tapiz" y casi me da algo. Es irrecuperable la imagen que tenía puesta y además bustamante no es precisamente santo de mi devoción y pa más inri encima se me ha colgado todo y no me ha dejado deshacer y he tenido que rebotar el bicho.....

Pero bueno, yá tengo (al fin) la copia local. Voy a hecharle un ojo con calma. Es que veo que fallan algunas cosas, como comentas, desaparecen medias capas y cosas de esas. Algo está "raro" a ver si encuentro lo que es.

No sé si le encontraré la vuelta hoy o mañana, pero yá te diré algo ok?

De todas formas si alguien descubre antes el problema que lo diga

[debspain]

ok! muchas gracias! de todas formas yo me voy de aquí a unas 5 horitas de vacaciones asi que igual no podré ver la respuesta hasta de aquí a una semanita más o menos, pero te agradezco el esfuerzo, gracias maquina!

[tunait]

Oh, vacaciones qué bien

Pues a ver si para cuando vuelvas he visto la luss y soluciono algo.

Buen viajee

[debspain]

gracias tunait!

[debspain]

ola tunait! ya volvi! conseguiste averiguar por qué pasa lo de las capas?

[tunait]

esteeee.... nop. Básicamente al día siguiente me olvidé.

Mañana le echo un ojo

[debspain]

jajjaa ok! no pasa nada, tranquila, si puedes echarme una mano genial, me volveré a poner en tus manos!

[debspain]

alguien puede ayudarme? por qué pasa eso en las capas?

[tunait]

es que cuando dejo de ver los posts los olvido.

Yá le echo un ojo

[debspain]

thanks!! un saludo!

[tunait]

he hecho un futimé de cambios... a ver si logro explicarlo todo y no omitir nada.

Lo de las capas con los thumbnails que se recortan y desaparecen parcialmente;

Eso es por el script que estás usando que utiliza la propiedad clip para recortar las capas y que no se expandan visualmente por todo el documento. Quizás si usaras el script sobre una sola capa no te daría ese problema, pero parece que al manejar las dos capas en la misma página se confunde y acaba recortando la capa que no es.

Nunca he trabajado con clip sencillamente porque hay otra forma de lograr lo mismo y no hace tanto destrozo.

Basta con meter cada una de tus capas con los thumbnails dentro de otra capa respectivamente y darle a esa capa la propiedad de overflow:hidden.

Fíjate las dos primeras líneas como quedan ahora

<div id="fuera" style="position:absolute; width:105px; height:400px; z-index:1; overflow: hidden; top: 0;">
<div id="capa" class="imagenes" style="position:absolute">

aqui la ristra de fotos pequeñas

y la otra capa....

<div id="fuera2" style="position:absolute; width:150px; height:400px; z-index:2; overflow: hidden; left: 460; top: 0;">
<div id="capa2" class="imagenes2" style="position:absolute">

aquí la otra ristra de fotos.

OK, ahora debes modificar los estilos así

.imagenes{
position:absolute;
top:0;
left:0;
width:150;
height:400;
}
.imagenes2{
position:absolute;
top:0;
left:0;
width:150;
height:400;
z-index: 1;
text-align:right
}

Básicamente lo que he hecho ha sido sacar el color de fondo y añadir lo que puse en negritas.

Ahora te vas al archivo scriptfotos.js

Comenta las siguientes líneas (ya sabes, ponerles delante dos barras //)

línea 60:
if (ie)
{
document.all(id).style.height=400; //le doy altura a la capa
document.all(id).style.top=0; //situo la capa a 0 px de la parte superior de la pantalla
//document.all(id).style.clip="rect(0px,150px,400px, 0px)";

línea 72:
else if (n6)
{
document.getElementById(capaid).style.height=400;
document.getElementById(capaid).style.top=0;
//document.getElementById(capaid).style.clip="rect(0 px,150px,400px,0px)";


línea 91:
if ((y >= topcapa) && (donde==0))
{
activo=true;
valor=3;
paso+=valor;
document.all(id).style.height=(a+valor);
document.all(id).style.top=(y-valor);
//eval("document.all('" +id+ "').style.clip='rect("+paso+",150,"+(a+valor)+",0) '");
tiempo=setTimeout("recortar(0,'" + id + "')",1);

línea 100:
else if ((y <= 0) && (donde==1) && (activo==true))
{
valor=-3;
paso+=valor;
document.all(id).style.height=(a+valor);
document.all(id).style.top=(y-valor);
//eval("document.all('" +id+ "').style.clip='rect("+paso+",150,"+(a+valor)+",0) '");
tiempo=setTimeout("recortar(1,'" + id + "')",1);

línea 145:
if ((y >= topcapa) && (donde==0))
{
activo=true;
valor=5;
paso+=valor;
document.getElementById(capaid).style.height=(a+va lor);
document.getElementById(capaid).style.top=(y-valor);
//eval("document.getElementById['"+capaid+"'].style.clip='rect("+paso+",150,"+(a+valor)+",0)'") ;
tiempo=setTimeout("recortar(0)",1);

OK, ahora vamos a por la imagen central.

Ponla así

<div id="imagen" align="center" style="position:absolute; left:0; width: 609px; z-index: 0; border: 1px none #000000; height: 390px;">
<div align="center"><br>
<img src="../img/fotos/conciertos/busta.jpg" name="bustaimg" style="filter:blendTrans(duration=1)"><br>
<br>
</div>
</div>

Con este último cambio logramos un centrado automático de la imagen.

Le saqué el filtro a la capa de la imagen central porque de entrada no se veía nada. Si es así como lo quieres, pues se lo vuelves a poner.


Ahora lo que dices que a veces no se aplica el filtro.

El filtro sólo se aplica cuando está fuera de la transición.
Es decir, si una imagen está en transición con otra y pasas el mouse sobre una tercera imagen, la central cambia pero no se aplica el filtro porque aún no había terminado la transición.

Fíjate que si lo haces despacio y permites que terminen las transiciones el filtro funciona ok. Donde no funciona es si pasas rápido el mouse de un thumbnail a otro. Contra eso no puedes hacer nada, salvo hacer la transición usando alguna otra forma.

Respecto al tamaño de las imágenes.... comentas que quieres ver la forma de darles dimensionado. No te lo aconsejo, pues la redimensión no aligera el peso de la imagen y al dar click para ver la imagen en la pop-up la imagen se verá inmensa y queda mal.

Te sugiero redimensiones tus imágenes con algún editor de imágenes y que éstas se carguen siempre a su tamaño original.

Si no quisieras hacer esto último podríamos mirar de aplicar un script que hice el otro día para redimensionarlas. Eso sí, te quedarán igual de pesadas.

No sé si he omitido algo, cualquier cosa me dices

un saludo

[debspain]

ok tunait, muchisimas gracis, funciona a la perfeccion, salvo el problemilla de los filtros pues preferia que se viera difuminado en la pagina, pero siempre acaba tapando alguna parte importante de las fotos... Salvo eso todo perfecto, y ya cambiare el tamaño de las imagenes mas grandes para que se no se vean tan inmensas...

de todas maneras si pudieras pasarme ese script que dices para redimensionar, para alguna otra pagina si que me interesa ;)

Lo dicho, mil gracias!

[tunait]

Claro, le he de dar los últimos retoques y colgarlo. No te preocupes que en cuanto esté visible yo te envío el link para que le eches un ojo


Por otro lado te comento que cuando tenga un rato y ganas miraré de trabajar algún script para lograr el mismo efecto que el blendtrans pero que reaccione en cualquier momento de la transición. Si lo hago y me queda bien también te aviso, por si lo quieres aplicar.

Un saludo

[debspain]

ok tunait!! si me lo pasarás me harias la mujer más feliz del mundo ;) ya estaré pendiente a ver cuando lo pones!