Mar122009

Rollover CSS en imágenes sin javascript

En el desarrollo web de aplicaciones es muy común usar rollover en las imágenes, por este mismo motivo detallaré posteriormente una forma de realizar rollover CSS en imágenes sin usar javascript.

Para que funcione en Internet Explorer 6 el rollover CSS es necesario que la imagen esté dentro de un enlace, ya que la única etiqueta compatible con este navegador es a:hover.

Actualmente muchos desarrolladores web siguen usando funciones javascript y etiquetas HTML como onload, onmouseover y onmouseout para realizar rollover en imágenes… siendo este método poco accesible, ya que es necesario que el usuario web tenga javascript habilitado.

Ventajas rollover CSS en imágenes

  • Compatible con Internet Explorer 6 y 7, y derivados de Mozilla como Firefox.
  • Código CSS y HTML más reducido y limpio.
  • No es necesario tener javascript habilitado.
  • Se cumplen los estándares web de la W3C.
  • Se cumplen las pautas de accesibilidad web.

Ejemplo rollover CSS en imágenes

Descarga el ejemplo Rollover CSS en imágenes.

En primer lugar debemos crear un gif transparente y los estados over y out de la imagen que deseamos enlazar para poder realizar el rollover CSS en imágenes.

Posteriormente definimos el estilo CSS del contenedor de la imagen con la imagen de fondo out definiendo además en el las dimensiones de la imagen.

<style type="text/css">
img { border:0; }
#rollover { width:175px; height:27px; background:url(/wp-content/uploads/2009/03/desarrollo-web-off.gif) top left no-repeat; }
#rollover img, #rollover a:hover { width:175px; height:27px; }
#rollover a:hover { position:absolute; background:url(/wp-content/uploads/2009/03/desarrollo-web-on.gif) top left no-repeat; }
</style>

Después agregamos las dimensiones de la imagen a enlazar mediante CSS a la etiqueta img y al propio a:hover para asegurarnos la compatibilidad con algunos navegadores y que el enlace abarque todo el contenedor.

<h1>Ejemplo Rollover CSS en imágenes</h1>
<div id="rollover"><a href="https://alejandroarco.es" title="desarrollo web" accesskey="1"><img src="/wp-content/uploads/2009/03/pixel.gif" alt="desarrollo web" /></a></div>

Finalmente, definimos al estilo a:hover que se posicione de forma absoluta respecto al contenedor y le asignamos la imagen de fondo over correspondiente.

Si tenéis alguna duda sobre el funcionamiento del rollover CSS en imágenes sin javascript, no dudéis en dejarme un comentario al respecto.

Share

9 Comentarios

+ Añadir Comentario
  • Hola, muy chulo el rollover, pero por lo que veo en navegadores que usan webkit, vease chrome o safari, el efecto no funciona, se queda con la primera imagen siempre.

  • @Squil: Como bien dices este método no funciona actualmente en los navegadores que hacen uso del framework WebKit: como el Google Chrome y el Safari.

    Aunque el método que he detallado cumple los estándares web de la W3C, por lo que me intuyo que en futuras versiones del framework WebKit funcionará perfectamente.

    Un saludo y gracias por el aporte.

  • Hola Alejandro, como menciona Squil, el código del rollover no funciona en navegadores como Chrome y Safari, de todas formas se agradece tu aporte. 😉

  • Y porque no usar una sólo imagen que contenga ambos «estados» y simplemente cambiar la posición de la misma en el estado :hover

    Evitas cargar dos imagenes, con su consecuente espera de tiempo cuando el usuario haga :hover y evitas una linea de código respecto al tuyo.

  • @Enrique: usar una única imagen tiene sus pros y sus contras, como bien dices evitas una línea de código en el CSS y la carga de dos ficheros independientes, pero…

    Como puntos negativos mencionar:
    – Si quisieramos realizar una animación del estado :hover con un .gif mediante un único fichero que contenga los dos estados, el estado :hover se estaría reproduciendo aunque no estuviera visible, de modo que cuando pusieramos el cursor encima del botón la animación no se reproduciría correctamente.
    – Evidentemente tener dos estados bajo un mismo fichero hace que la carga inicial del mismo sea mayor, aunque en ningún momento se haga uso del estado :hover.

    De igual forma, ambos métodos son totalmente factibles de usar en función de las necesidades que tengamos.

    Un saludo,
    Alejandro Arco

  • No entiendo cual es el objetivo de de crear y luego publicar métodos que no son compatibles con todos los navegadores. Ya basta dios, cada uno hace la suya y luego abajo aclaran o directamente no lo hacen que no funciona con tal o cual grupo de navegadores. Si no se adapta a la situación del mercado entonces no interesa si cumple con los estandares de la W3C.

  • @Julittok: respeto tu opinión pero no la comparto, por diversas razones:

    1. Es fundamental cumplir al menos los estándares web de la W3C, ya que con esto nos aseguramenos una buena interpretación de nuestro código por los distintos navegadores.

    2. No hay que olvidar a que mercado va dirigido el desarrollo web profesional (clientes), y en la gran mayoría de los casos estos usan el navegador IE.

    Un saludo,
    Alejandro Arco

  • Gracias por tu aporte, Alejandro…

    Lo probaré. De todas formas, creo que pocas cosas interesantes funcionan en todos los navegadores. A ver si de una vez por todas, se empiezan a adaptar a estándares TODOS los navegadores, porque es necesario sobre todo para webmasters. Nos volvemos un poco locos a veces. Yo por mi parte he empezado a crear nuevas páginas con los elementos más sencillos posibles, de forma que den el mínimo de problemas. Creo que si el diseño es atractivo, se puede simplificar al máximo el funcionamiento.

    Saludos… 🙂

  • Como esta desrrollo web, yo he estado buscando una solucion similar a su ejemplo, pero lo que deseo es tener una matriz de fotos y a la hora de posicionarme en alguna, verla mas grande en otra parte de la matriz, como cuando esta viendo las fotos de una automovil, y no se si usando css es una forma liviana, y facil para este tipo de rollover.

    Gracias Luis.

  • hola mi consulta es la siguiente: estoy tratando de hacer un menu con iconos… y no se ve el roll over. puse todas las propiedades, pero no logro darme cuenta el motivo por el que no se ve… quizas haya algo q me este trabando…
    te paso el codigo para ver si me podes ayudar…

    estilos:
    #iconmenu {
    float: right;
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 150px;
    height: 20px;
    background-image: url(../imagenes/Home.gif);
    background-repeat: no-repeat;
    }
    #iconmenu li {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    display: block;
    left: 112px;
    background-image: url(imagenes/ico_hover.gif);
    }

    #iconmenu a {width: 20px; height: 20px; display: block;}

    #iconmenu #home {left: 64px; 0;}
    #iconmenu #question {left: 88px; 0;}
    #iconmenu #contact {left: 591px; 0;}

    #iconmenu #home a:hover {
    background-image: url(../images/ico_hover.gif);
    left: 64px; 0;
    }

    #iconmenu #question a:hover {
    background-image: url(../images/ico_hover.gif);
    }

    #iconmenu #contact a:hover {
    background-image: url(../images/ico_hover.gif);
    background-repeat: no-repeat;
    }

    html:



    muchas gracias por tu ayuda

Si tienes alguna consulta, escríbela ...