intercambio de imágenes

cuideru · #1 (**permalink**) 18/02/2007, 13:50

Hola, estoy haciendo rollovers con imágenes de sustitución. El caso es que no veo la forma de cambiar de una imágen a otra al pasar el ratón. Probé a poner:

A:hover{background: url()}

y entonces la imágen de fondo siempre queda debajo, por lo que intenté subirla con z-index, pero no funciona. Alguna idea?

Gracias,
Cuideru

#2 (**permalink**) 18/02/2007, 18:34

Pues ¿acaso es extraño que la imagen de FONDO quede siempre debajo?
Deberás intentar con javascript, o mezclar con un <span> que se muestre por encima, y que tenga la imagen de fondo que querés:
<a ....><span...>
donde hay una imagen de fondo para el 'a' y otra para el 'span', luego en vez de cambiar la imagen de fondo, mostrás el span.

a:hover span { display : block }

Pero me parece mejor hacerlo con javascript, para modificar menos el código.

Saludos.

cuideru · #3 (**permalink**) 19/02/2007, 03:49

Gracias por tu respuesta, pero sigo sin ver cómo resolverlo. Lo que linko es una imágen, y quiero que en onmouseover, dicha imágen se cambie por otra.
Es cierto que si lo hago en A:hover {background-image} la imagen quedará de fondo (probé tantas cosas que al final estaba mareado) pero probé simplemente A:hover {url();} y tampoco lo hace. No entiendo bien cual es tu código combinando A:hover y <span> Y la verdad, empiezo a pensar que el intercambio de imágenes no se puede hacer con CSS.

Mikmoro · #4 (**permalink**) 19/02/2007, 05:44

Hombre, un tanto fatalista los de "empiezo a pensar que el intercambio de imágenes no se puede hacer con CSS".

Es una cosa simplísima. Mira este código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cambio de imagenes de fondo</title>
  <style type="text/css">
a { width: 61px;
height: 37px;
display: block;
position: relative;
background-image: url(img/N1.gif);
background-repeat: no-repeat;
}
a:hover { background-color: transparent;
background-image: url(img/N2.gif);
background-repeat: no-repeat;
}
  </style>
</head>
<body>
<a href="#"></a>
</body>
</html>

Antes de que cambies las imágenes, mira este ejemplo funcionando para que veas que es perfectamente posible (es el mismo código que te pongo).

http://www.menoslobos.com/mikel/cambio_de_imagenes.html

Mikel.

cuideru · #5 (**permalink**) 19/02/2007, 10:22

Gracias por la respuesta, funciona estupendamente. Creo que en algún momento ayer pasé por esa idea, pero estaba tan cansado que no me salió.
Enhorabuena de nuevo.

Cuideru.

Mikmoro · #6 (**permalink**) 19/02/2007, 11:31

A menudo la cosa más tonta es la que más nos rompe la cabeza.
Saludos.

Mikel.