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