CSS: Cambiar la imagen de un div con enlace “onmouseover”

22 octubre 2008 at 3:55 pm 9 comentarios

Supongamos que tenemos una imagen que hará de enlace y que queremos que cambie cuando pasamos el ratón sobre ella.

Por ejemplo si tenemos un enlace en una celda de una tabla, en lugar de <td><a><img/></a></td>, lo haremos de la siguiente manera:

<td>
<div id="enlace">
<a href="http://www.tuscerosymisunos.es"></a>
</div>
</td>

Y en nuestro CSS tendremos:

div#enlace a{
	float:left;
	width:205px;
	height:27px;
	background-image:url(img/enlace_off.gif);
	background-repeat: no-repeat;
}
div#enlace a:hover{
	background-image:url(img/enlace_on.gif);
	background-repeat: no-repeat;
}

Señalar que aparece el tamaño de las imágenes (preferiblemente serán del mismo tamaño) y la ruta a las mismas (en este caso están en el directorio img y son imagen_off.gif e imagen_on.gif).

Y con este sencillo truco nos podemos librar de los javascript para realizar esta tarea.

Anuncios

Entry filed under: CSS. Tags: , .

Instalación de un servidor CVS casero Gestión de dependencias en OSGi

9 comentarios Add your own

  • 1. Patricia  |  11 diciembre 2008 en 9:16 pm

    Muchas gracias…me sirvio mucho

  • 2. Miguel  |  12 diciembre 2008 en 9:22 am

    Gracias Patricia.

    Me alegro sinceramente.

  • 3. pedrustin  |  18 febrero 2009 en 4:50 am

    Hola muy interesante ¿como podria usarlo con diferentes links que pueda tener la pagina? mil gracias

  • 4. Miguel  |  18 febrero 2009 en 9:44 am

    Pues creo que si el enlace son distintas imágenes tendrás que duplicar todo utilizando un id diferente para cada imagen.

    En casos de menús con muchos enlaces se suele tener una imagen de fondo sin texto y se pone texto sobre ella. Digamos que es otra cosa diferente.

  • 5. eriko  |  26 junio 2009 en 5:43 pm

    gracias por el ejemplo… estoy intentando una cosa que en teoria tendría que ser más simple pero no me sale. Sería cambiar una imagen de background a través de un enlace común externo a la imagen… de manera que me ahorraría tener que refrescar la página y no se si se podría con javascript… bueno si alguien lo ve facil… GRACIAS

  • 6. Felipe de Jesús  |  14 marzo 2011 en 8:20 pm

    corto y bueno el ejemplo

  • 7. Abelardo  |  17 junio 2011 en 6:18 pm

    Muy interesante….

    Gracias por el Aporte

    Saludos

    Acanche

  • 8. Seto Kaiba  |  8 octubre 2011 en 11:41 pm

    hey gracias!! me ayudo bastante, tu pagina, pero agregale, como seria en una pagina de estilos externa, para que neofitos como yo entendamos, por mi parte ya se, gracias de nuevo.

  • 9. gesell  |  8 marzo 2012 en 1:26 am

    Muy interesante.
    gracias por la ayuda

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Mi perfil

View Miguel Orbegozo's profile on LinkedIn

Feedjit

Feeds

Otros…

BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog

Bitacoras.com

Add to Technorati Favorites


A %d blogueros les gusta esto: