Imágenes de sustitución

Autor: DemaKi_na 5-11-2010

En la creación de sitios web es muy común hacer uso del Rollover en las imágenes. Para crearlos podemos hacerlo únicamente con CSS en imágenes o fondos sin necesidad de utizar javascript.

No nos olvidemos de que en Internet Explorer 6 para que el Rollover CSS funcione, es imperativo que la imagen (u otro elemento) 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, etiquetas HTML y eventos como onload, onmouseover y onmouseout para realizar el rollover . Este método poco accesible, ya que es necesario que el usuario web tenga javascript habilitado.

Pero a estas alturas podemos pensar que la seudo clase :hover puede utilizarse en cualquier elemeto HTML. Obviando por supuesto a nuestro querido IE6.

Algunas de las ventajas de utilizar Css frente a Javascript podrían ser:

  • 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.

Asi posríamos cambiar, por ejemplo el color de fondo a cualquier elemento, siempre que su uso no se convierta en redundante para nuestro contenido. Veamos el siguiente código:

 <style>
 p{background: color:#cccccc;}
 p:hover{background:#cc00000;}
 </style>

Y el resultado sería:

Este es un párrafo que al pasar el curso por encima cambiar de color de fondo.

De la misma manera tambien podriamos cambiar una imagen , tanto si estuviera como fondo o imagen como tal. Para llevar a cabo esta acción necesitariamos dos imagenes, una para la cara A y otra para la cara B. Lo cual puede ser interesante para mostrar las portadas de , por ejemplo, los CDs.

Nuestro codigo bien podría ser:

 ul#dos{width:300px; height:300px; position:relative;}
 ul#dos li img.del{position:absolute;top:0; left:0; z-index:5 }
 ul#dos li img.tras{position:absolute; top:0;left:0;z-index:4;}
 ul#dos li:hover img.del{position:absolute; top:0; left:0; z-index:3;}

Cuyo resultado nos daría:

Podemos ver como con un poco de ingenio y usando la seudo-class :hover podemos conseguir efectos simples pero útiles en muchas ocasiones. También podemos jugar con las propiedades display o visibility.

651 comentarios