Rollover de imágenes en HTML (elemento IMG) sin Javascript
19 de Noviembre 2008
Los rollovers de imágenes con javascript casi han pasado a la historia desde que podemos hacerlo de manera mucho más fácil y limpia con CSS, pero para los casos en los que, por la razón que sea, sea necesario que la imagen del rollover esté como elemento <img> en el código HTML, podemos conseguirlo utilizando sólo CSS.
El único requisito para que el rollover funcione en Internet Explorer 6, es que la imagen esté contenida en un enlace. En el caso de que la imagen sea un botón de tipo image, necesitaremos añadir una clase por Javascript, ya que Explorer 6 ignora el :hover sobre cualquier elemento que no sea un enlace.
El principal inconveniente de los rollovers con Javascript es que necesitamos dos imágenes para cada estado. Con esta técnica, usamos una sola imagen con sus dos estados, como lo haríamos con un rollover “normal” con CSS.
Imagen usada para el rollover:
La técnica se basa en conseguir un efecto “clip” mediante el uso de overflow: hidden. Para ello metemos la imagen en un elemento <span> al que damos el ancho y alto del área visible de cada estado de la imagen. En el ejemplo 22 píxeles. Damos display block y posición relativa para que Internet Explorer sea feliz (en otros navegadores no es necesaria la posición relativa)
Por último, damos al enlace en estado hover, posición relativa y una posición negativa igual a la altura de la imagen. En este caso no es necesario dejar un margen en blanco entre ambos estados de la imagen para prevenir que al aumentar el tamaño de texto de la página se vea parte de la imagen para el estado hover, como ocurre con los navegadores que no hacen zoom (Firefox 2, Google Chrome, Internet Explorer 6) y los rollovers con CSS mediante imágenes de fondo, ya que que podremos aplicar dimensiones mediante CSS diréctamente a la imagen, permitiendo que se dimensione al aumentar el tamaño de texto.
El código HTML utilizado sería el siguiente:
<span class="img-rollover">
<a href="#"><img alt="A" src="boton-a.png" /></a>
</span>
Y el código CSS:
span.img-rollover{ width: 22px; height: 22px; overflow: hidden; display: block; position: relative; }
span.img-rollover a:hover{ top: -22px; position: relative;}
El resultado:
Técnica inspirada en el botón de buscar de The Man in Blue
Sobre esta entrada
Archivado en Buenas ideas, CSS, How to
4 comentarios a “Rollover de imágenes en HTML (elemento IMG) sin Javascript”
jervert, el Noviembre 19th, 2008:
Una idea excelente: se ahorra tiempo y el uso de Javascript.
Mario, el Noviembre 20th, 2008:
mmmm… muy interesante… Con esto me hubiese evitado yo más de un dolor de cabeza en más de una ocasión…
A delicious de cabeza
isoria, el Noviembre 27th, 2008:
Gracias por la información, va genial, lo único que tengo un problema…
En firefox al hacer rollover la imagen se corta un poco por la pate inferior y ese poco que recorta se ve en la parte superior de esa misma imagen.
¿Alguien sabe porque?
Gracias
kcmr, el Noviembre 28th, 2008:
Isoria, sin verlo, ni idea de qué puede estar pasando. Probablemente sea cuestión de desplazar unos píxeles más o menos la posición de la imagen para el estado :hover o algún otro estilo que está interfiriendo con el del rollover.
Saludos.