hover con imagen

morfasto · #1 (**permalink**) 18/08/2011, 13:55

Hola, que tal?

Estoy tratando de hacer un boton con una imagen dentro de un div con css, para que cuando el puntero del mouse este encima, se cambie a otra imagen con hover. Como hago?

Gracias!

Heiroon · #2 (**permalink**) 18/08/2011, 14:28

Buenas mi pana, te voy a dejar un ejemplo bien sencillo para ver si te ayudo.

Código CSS:

Ver original.clase_del_div
{
   background-image: url(imgInactiva.png);
   /*otros atributos css */
}
 
.clase_del_div:hover
{
   background-image: url(imgActiva.png);
}

Espero te sirva de ayuda. Salutacions!

morfasto · #3 (**permalink**) 18/08/2011, 14:36

Funciona perfecto, GRACIAS!

Hazuki · #4 (**permalink**) 19/08/2011, 08:04

Una técnica muy utilizada es la de los sprites: juntas varias imágenes en una sola y mediante un "truco" seleccionas la que quieras usar. Así utilizas menos archivos y le ahorras un poco de trabajo a los navegadores.

Un buen tutorial lo encuentras en:
http://www.w3schools.com/css/css_image_sprites.asp

Saludos.