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;
}