aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Todos hemos utilizado alguna vez Flickr (ejem..) y hemos visto lo currados que son las anotaciones sobre imagenes que hacen. Realmente son muy interesante y prácticos a la hora de hacernos llamar la atención sobre un trozo de la imagen que no interesa remarcar.

Ahora podemos hacerlo y únicamente con CSS sin necesidad de Javascript, aunque con el uso de los dos podemos conseguir grandes resultados.

La idea es crear una serie de capas que estarán úbicadas sobre la imagen a modo que cuando detecte el evento :hover nos muestre el contenido de dicha capa. Vamos a ver algo de código.

HTML

<dl id="officeMap">
 <dt id="monitor">1. Monitor</dt>
 <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor.  I wish I had an LCD!</span></a></dd>
 <dt id="phone">2. Phone</dt>
 <dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
 <dt id="case">3. PC Case</dt>
 <dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
 <dt id="notebook">4. IBM ThinkPad</dt>
 <dd id="notebookDef"><a href="#"><span>Here's my Linux notebook.  Some crazy coding going on.</span></a></dd>
 <dt id="floppy">5. External Floppy Drive</dt>
 <dd id="floppyDef"><a href="#"><span>Floppy Drive.  Ancient... I know!</span></a></dd>
</dl>

Como podemos se ha usado una lista de definición en la cual se han declarado los puntos dentro de la imagen. Luego mediante CSS añadiremos efectos a la imagenes.

CSS

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

Opinion 

Personalmente creo que es algo muy interesante y que poco a poco va integrandose más en el concepto de navegación por Internet, es cierto que es poco intuitivo si no eres cuidadoso con la forma de remarcar las anotaciones, pero eso con un poco de idea y gusto, puedes conseguir unas imagenes realmente sorprendentes, cargada de más información.

«Vale más una imagen con anotaciones que una imagen sola»

Otras formas de conseguir algo parecido

Anotaciones a imagenes