Un sencillo rollover con css

Que tal amigos, debido al desarrollo de la nueva imagen de nuestra página web (http://www.triplepar.com) tuve que buscar un rollover sencillo y fácil de usar para el área de los links a nuestras redes sociales, aquí lo que encontré:

Estos son los estilos css que se requieren: [code lang=”js”] <style type="text/css">
img { border:0; }
#rollover { width:175px; height:27px; background:url(/imagen-inicial.gif) top left no-repeat; }
#rollover img, #rollover a:hover { width:175px; height:27px; }
#rollover a:hover { position:absolute; background:url(/imagen-sobre.gif) top left no-repeat; }
</style> [/code] y en html una estructura como esta: [code lang=”js”] <h1>Ejemplo Rollover CSS en imágenes</h1>
<div id="rollover"><a href="http://triplepar.com.mx" title="Foro TriplePar" accesskey="1"><img src="/pixel.gif" alt="Foro TriplePar" /></a></div> [/code] Es muy importante resaltar que para lograr una buena accesibilidad con este código hay que definir adecuadamente el alt de la imagen, el title y el accesskey del link.

Fuente: www.alejandroarco.es