Foros del Web » Creando para Internet » CSS »

intercambio de imágenes

Estas en el tema de intercambio de imágenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2007, 13:50
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
intercambio de imágenes

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)  
Antiguo 18/02/2007, 18:34
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: intercambio de imágenes

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.
  #3 (permalink)  
Antiguo 19/02/2007, 03:49
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: intercambio de imágenes

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.
  #4 (permalink)  
Antiguo 19/02/2007, 05:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: intercambio de imágenes

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.
  #5 (permalink)  
Antiguo 19/02/2007, 10:22
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: intercambio de imágenes

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.
  #6 (permalink)  
Antiguo 19/02/2007, 11:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: intercambio de imágenes

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

Mikel.
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 05:27.