Uninstallme

Desarrollo frontend, estándares web, accesibilidad y más

Rollover de imágenes en HTML (elemento IMG) sin Javascript

Por kcmr, el 19 de Noviembre de 2008 en Buenas ideas, CSS

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

7 comentarios

  1. Por jervert, el 19 de Noviembre de 2008

    Una idea excelente: se ahorra tiempo y el uso de Javascript.

  2. Por Mario, el 20 de Noviembre de 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 ;)

  3. Por isoria, el 27 de Noviembre de 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

  4. Por kcmr, el 28 de Noviembre de 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.

  5. Por Diego, el 30 de Marzo de 2009

    Aplaudo esta tecnica, me parece excelente, mis gracias a the man in blue y a ustedes por publicarla.

  6. Por Rodrigo, el 8 de Julio de 2009

    Me parece una buena técnica, pero, ¿no sobra el span? Se podría aplicar la clase directamente al enlace, sin tener que envolverlo en un contenedor. Y si hacemos rollover, es precisamente para enfatizar que se puede hacer clic en lo “rolloverable”…

  7. Por kcmr, el 8 de Julio de 2009

    Sí, sobra el span pero en su día no me di cuenta.
    Mira esta página: http://www.arsys.es/microsites/servidor-cloud/
    Usan exactamente la misma técnica sin utilizar el span.

Deja tu comentario

Campos obligatorios marcados con asterisco *