imagenes superpuestas en layers??

[dvdaya]

Hola a todos! a ver si alguien me puede orientar:

tengo varios links que apuntan a imagenes rollover que están puestas en div's una encima de la otra.
al pasar por cada link me gustaría que apareciera la imagen que le toca, pero de mmomento sólo se ve la que está encima del resto.

Nota: he hecho rollovers porque lo que quiero es que sólo aparezca la imagen cuando se pase por el link, así que la primera imagen del rollover es igual que el fondo de la pantalla (gris).
Pero en realidad lo que me gustaría hacer es que salíera directamente la imagen (que previamente estuviera HIDDEN) y luego VISIBLE, pero no lo he conseguido.

Alguien me puede echar un cable?
Gracias a todos de antemano y un saludo.

[KnowDemon]

¡¡Puedes crear rollovers de formas mucho más simples con CSS!!

Como IE solo reconoce el :hover en los "anchors", nos valdremos de ellos para hacer el rollover. Veamos:

Supon que tu rollover es de 200x100 pixeles. Crea un elemento "a" con la propiedad display: block; dale las dimensiones mencionadas y asigna una imagen de fondo del doble de ancho o alto. De esa forma solo verás una mitad de la imagen. He aquí el secreto: cuando el raton pase sobre él, solo desplaza el fondo de forma que se vea la otra mitad. Una representará uno de los estados de tu rollover, y la otra... pues el otro.

¡¡Voilá!! Un rollover con precarga hecho en CSS:

a.rollover{
display: block;
width: 200px;
height: 100px;
background: url(imagen.png) 0 0; /*Imagen de 200x200*/
}

a.rollover:hover{
background: url(imagen.png) 0 -100px;
}

[dvdaya]

gracias, voy a provarlo.
Aún así he encontrado otra manera de hacerlo. Déjame que la revise, la ponga en orden, la entienda, etc...
y luego te la enseño para que me des tu opinión. Para saber cual es más efectiva, cómoda o útil, ok?

un saludo

[caricatos]

Hola:

Algo parecido tengo en el menú de la página de mi perfil, y también se ha hablado en estos foros, así que buscando creo que encontrarás más posibilidades...

El sistema que uso es con una capa contenedora con position relative y las 2 imágenes con position albsolute y tanto top como left=0... Y con javascript poner el mouseover para hacer invisible la imagen superior y el mouseout de la imagen inferior que vuelva a mostrar la imagen superior...
<style>
.roll {
position: absolute;
top: 0;
left:0;
}
</style>
<div style="position: relative">
<img class="roll" src="fondo1.jpg" name="imagen1" onmouseout="document.images.imagen2.style.visibili ty = 'visible'"/>
<img class="roll" src="fondo2.jpg" name="imagen2" onmouseover="this.style.visibility = 'hidden'"/>
</div>

Saludos