Foros del Web » Creando para Internet » CSS »

Cambiar imagen en hover

Estas en el tema de Cambiar imagen en hover en el foro de CSS en Foros del Web. Necesito ayuda con un código a mi parecer bastante sencillo, pero no logro hacerlo funcionar. Tengo una imagen como enlace a una página de facebook, ...
  #1 (permalink)  
Antiguo 06/12/2010, 13:28
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Cambiar imagen en hover

Necesito ayuda con un código a mi parecer bastante sencillo, pero no logro hacerlo funcionar. Tengo una imagen como enlace a una página de facebook, la idea es que se muestre de color gris por default, y al pasar el mouse encima cambie a color azul. Tengo ambas imágenes por separado y mi código es como sigue:

Código HTML:
Ver original
  1. <div id="header">
  2. <a href="facebook.com/vinculo" class="over">
  3. <img class="social" src="css/images/facebook_off.png" alt="facebook" width="84" height="22" />
  4. </a>
  5. </div>

Y en CSS tengo lo siguiente:

Código CSS:
Ver original
  1. a.over:hover
  2. {
  3. width: 84px;
  4. height: 22px;
  5. background-image: url("images/facebook_on.png");
  6. background-repeat: no-repeat;
  7. }

Y lo que sucede es que al pasar el mouse sobre el vínculo aparece la imagen azul pero debajo de la gris, es decir, se ve desfasada.

He intentado otras maneras, por ejemplo he quitado la imagen del html y la he agregado a una clase en CSS pero fue peor porque ninguna imagen aparecía. ¿Me pueden ayudar? ¿qué estoy haciendo mal?
  #2 (permalink)  
Antiguo 06/12/2010, 13:56
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Cambiar imagen en hover

se debe a que css aplica las imágenes sobre el background, y tu tienes la otra sobre un <img>, son diferentes y la imágen de la etiqueta img siempre solapará a la de fondo porque tiene una posición superior en el orden Z.

tienes 2 opciones:

-hacer el cambio con javascript:

<img ... onmouseover="this.src='css/images/facebook_on.png';" onmouseout="this.src='css/images/facebook_off.png';" />

-eliminar la <img> y usar un div con el tamaño de la imagen para colocar con CSS la imagen del botón.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 06/12/2010, 14:52
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Respuesta: Cambiar imagen en hover

Gracias por responder. Ya lo hice con javascript y no tuve problema, pero por cuestiones de accesibilidad prefiero conseguir el efecto con CSS. Ya quité la etiqueta <img> de html y dejé lo siguiente:

Código HTML:
Ver original
  1. <div id="header">
  2. <div class="over"><a href="facebook.com/vinculo"></a></div>
  3. </div>

Y el CSS:

Código CSS:
Ver original
  1. .over
  2. {
  3. width: 84px;
  4. height: 22px;
  5. background-image: url("images/facebook_off.png");
  6. background-repeat: no-repeat;
  7. }
  8.  
  9. a.over:hover
  10. {
  11. width: 84px;
  12. height: 22px;
  13. background-image: url("images/facebook_on.png");
  14. background-repeat: no-repeat;
  15. }

El resultado es que sólo aparece la imagen apagada (gris) pero lo extraño es que ni siquiera como vínculo, sólo como imagen. Agradecería un poco más de guía.
  #4 (permalink)  
Antiguo 06/12/2010, 15:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: Cambiar imagen en hover

prueba cambiar tu html de esta forma

Código HTML:
Ver original
  1. <div id="header">
  2.     <a href="facebook.com/vinculo" class="over"></a>
  3. </div>

y tu css

Código CSS:
Ver original
  1. .over
  2. {display:block;
  3. width: 84px;
  4. height: 22px;
  5. background:#f00 url("images/facebook_off.png");
  6. background-repeat: no-repeat;
  7. }
  8.  
  9. .over:hover
  10. {
  11. width: 84px;
  12. height: 22px;
  13. background:#0f0 url("images/facebook_on.png");
  14. background-repeat: no-repeat;
  15. }

el truco esta en aplicar el css al link directamente, observa el css y seguro entenderás donde estaba tu error

nota:los colores en el fondo los puse meramente para hacer la prueba y ver que funcionara
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 06/12/2010, 15:22
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Respuesta: Cambiar imagen en hover

Gracias por responder Ag666.

Hice los cambios que me sugieres pero extrañamente ahora no aparece ninguna imagen. El cursor cambia cuando paso el mouse por encima de donde debería estar el vínculo, pero no se ve nada, ni siquiera los colores que agregué en el CSS. Pensé que podría interferir el overflow: hidden que tengo en el #header (porque tengo contenido variable), pero lo removí y aún así no sale nada.

Ayuda, en verdad no quiero tener que recurrir a javascript.
  #6 (permalink)  
Antiguo 06/12/2010, 15:55
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: Cambiar imagen en hover

?¿ utilizas la clase over en algun otro elemento? que se este contra poniendo con otra clase o id? tambien revisa la url de la imagen que este correcta

porque si pruebas el codigo como te lo puse en un html vació veras que si funciona y aunque no exista la imagen hace el cambio de color
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 06/12/2010, 16:27
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Respuesta: Cambiar imagen en hover

¡Ag666, tenías razón! Tu código era correcto, lo que pasaba era que yo lo tenía anidado en otra clase que estaba interfiriendo. Eliminé la clase, metí el código directo y ya funciona a la perfección.

¡Gracias!

Etiquetas: hover
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 09:25.