Foros del Web » Creando para Internet » HTML »

imagenes superpuestas en layers??

Estas en el tema de imagenes superpuestas en layers?? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/09/2005, 12:14
 
Fecha de Ingreso: enero-2005
Mensajes: 66
Antigüedad: 19 años, 2 meses
Puntos: 0
Pregunta imagenes superpuestas en layers??

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.
  #2 (permalink)  
Antiguo 12/09/2005, 23:45
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 8 meses
Puntos: 2
¡¡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;
}
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #3 (permalink)  
Antiguo 13/09/2005, 02:12
 
Fecha de Ingreso: enero-2005
Mensajes: 66
Antigüedad: 19 años, 2 meses
Puntos: 0
otra manera de hacerlo

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
  #4 (permalink)  
Antiguo 13/09/2005, 03:04
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:49.