Desplazarse al índice de navegación.
Para bien o para mal, los efectos rollover forman parte de la peculiar cultura popular del diseñador de webs. En su elaboración se utilizan dos archivos gráficos parecidos (previamente paridos con el PhotoShop o similar), un elemento a con atributos onmouseover y onmouseout, un elemento img con nombre, y una ristra más o menos considerable de líneas de código javascript, que se encarga de pre-cargar las imágenes, y representarlas de acuerdo a los eventos.
En este ejemplo veremos un rollover "bajo en calorías", sin javascript y sin elemento img, pero con texto en el enlace, lo cual lo hace más accesible en cualquier entorno.
La base está en la utilización de la pseudo-clase hover de CSS. Será ahí donde incluiremos las dos imágenes que componen el efecto. En lo que a código HTML se refiere, el enlace será normal y corriente, salvo que anidaremos en él un elemento span con el texto del enlace, lo que nos permite ocultarlo. Sólo quedaría implementar un mecanismo para cargar la hoja de estilo en los navegadores que la interpreten bien (el truco de la regla @import puede valer).
El resultado podría ser como lo que sigue (mis disculpas por el gráfico, realmente lamentable):
<p>
<a href="pagina.html"><span>Enlace</span></a>
</p>
a { display:block; width:100px; height:25px; background:url('enlace0.jpg'); }
a span { display:none; }
p, a:hover { background:url('enlace1.jpg') no-repeat; }
La tercera regla de la hoja de estilos es redundante y el selector p debería ser innecesario, pero se incluye para "torear" el comportamiento de ciertos navegadores.
22/09/2002. sysifus. Recorte nº 1.
Estás en: tierra de nómadas > recortes > "Rollover" de imágenes sin JavaScript.