Lugal escribió:Entonces porque no intentas generar una capa por cada imagen y las ordenas por z-index, sitúas la imagen en la capa como background y la fijas al fondo, así solo tendrás que jugar con el div y z-index, ahorrandote tener que sincronizar, no se si me he explicado.
Si no te entiendo mal, me dices que ponga en mi capa 3 capas que contengan como background-image una imagen y luego agrandar o encoger estas capas para mostrar o esconder su imagen de fondo, jugando con el z-index para mostrar unas imágenes por encima de otras. Para hacer eso debería poner las 3 capas en el mismo lugar, para que las imágenes de fondo estén superpuestas, me imagino. Pero esto creo que me hará otro tipo de efecto, que es una especie de carrousel de imágenes y lo que yo intento hacer es conseguir un slider con efecto de "ensanchamiento" de las imágenes.
Leyendo tu comentario se me ha ocurrido una manera alternativa de hacerlo como pretendo, si me sale como creo que debería salir, postearé los resultados, muchas gracias
PD: como dije ayer, ahora mismo no dipongo de mi código, pero lo que tengo es algo parecido a esto:
<html>
<head>
<title></title>
<style>
#img1 {width:130px;}
#img2 {width:130px;}
#img3 {width:130px;}
</style>
<script>
function poscionamiento() {
//Aquí doy los valores css position de manera absoluta a las imágenes y las posiciono dentro de la capa//
/*Inicializo JQuery con document ready y utilizo el evento mouseover con el método animate() para declarar que a la imagen sobre la que se genera el evento, tenga un zIndex mayor que las otras imágenes y un width de 400px(el tamaño max. de la imagen) y un marginLeft con valor positivo(si quiero que la imagen se vaya agrandando por la derecha hasta alcanzar su tamaño) o con valor negativo(si quiero que la imagen se vaya agrandando por la izquierda hasta alcanzar su tamaño)
Luego utilizo el evento mouseout para hacer que la imagen se enpequeñezca hasta alcanzar el tamaño original*/
}
</script>
</head>
<body onload="posicionamiento()">
<div id="contenedor">
//Esta capa contiene las imágenes que tienen un tamaño de 400*300 y se ven con un tamaño de 130*300(las imágenes se ven de manera similar a las del enlace efecto acordeón que puse en mi primer post)//
<img id="img1" src="imagen1.png"/>
<img id="img2" src="imagen2.png"/>
<img id="img3" src="imagen3.png"/>
</div>
</body>
</html>
![[+risas]](/images/smilies/nuevos/risa_ani3.gif "más risas")
