CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

En unos sencillos pasos podremos crear un mapa de imágenes parecido al que usa Flickr, que nos permitirá “etiquetar” nuestras imágenes al pasar el ratón por encima.

Pasos a seguir:

1. Debemos pegar este código CSS en nuestro documento para etiquetar una imágen. En este caso, etiquetaremos el ordenador:

dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px;
height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute;
background: transparent url(office.jpg) -109px -317px no-repeat;
 top: -10px; left: -5px; }

dd#monitorDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}

2. Después, configuraremos nuestro código HTML para llamar al estilo. En este caso solo lo he hecho con el ordenador, pero se pueden hacer con varias, solo es cuestión de repetir el código HTML pero cambiando el nombre por el que lo vayamos a etiquetar:

<dl id="officeMap">
 <dt id="monitor">1. Monitor</dt>
 <dd id="monitorDef"><a href="#">
<span>Monitor elegante</span></a></dd>
</dl>

3. Listo, ya tendremos nuestro mapa de imágenes. Se puede ver un ejemplo de su funcionamiento.