Usar una imagen como elementos de menú con CSS

Jennifer Semtner nos da una solución para cuando queremos utilizar imágenes como elementos de menú, una mejora a la técnica CSS Spriting con la que ahorramos tiempo de descarga al utilizar sólo 1 imagen, hacemos menos HTTP requests.

La mejora de su técnica viene dada por algunas limitaciones de esta técnica:

  1. No podemos asignar “texto alternativo” a un div como criterio de accesibilidad.
  2. CSS Spriting y el IE6 PNG fix son incompatibles.
  3. A la hora de imprimir no se imprimirán las imágenes de fondo a menos que el usuario así­ lo indique.
  4. Para imágenes “normales” no es una buena técnica utilizar imágenes de fondo.

La técnica de Jennifer Semtner consiste en utilizar la propiedad CSS clip que recorta la imagen:

HTML

<a class="menu-contact" title="Texto del enlace" href="enlace.html"> 
<img class="transparent_png" height="39" width="611" alt="Contacto" src="menu.png"/>
</a>

Vemos cómo se utiliza el IE6 PNG fix para hacer transparente el png con la clase “transparent_png”

CSS

a.menu-contact {
display:block;
height:29px;
left:-399px;
position:relative;
top:0;
width:106px;
}
a.menu-contact img {
clip:rect(0pt, 505px, 29px, 399px);
position:absolute;
}
Escribí esto el 12/12/2008

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies