Notas en imágenes utilizando CSS

Cualquiera que haya utilizado Flickr alguna vez debe conocer la opción para agregar notas dentro de una imagen (Add Note), esta opción muchas veces es ideal para señalar o comentar dentro de la foto.

Cualquiera que haya utilizado Flickr alguna vez debe conocer la opción para agregar notas dentro de una imagen (Add Note), esta opción muchas veces es ideal para señalar o comentar dentro de la foto. Con un poco de CSS se puede lograr algo similar, funcional en Internet Explorer, Firefox y Opera.

[ Ver Ejemplo Final ]

Para poder crear cada zona activa se usaran varios divs anidados. A su vez estos estarán dentro de uno mayor, el cual contendrá a la imágen principal de fondo. La idea es que el usuario al acercarse a una zona activa, se muestre el correspondiente comentario. En el caso del ejemplo, tendremos que realizar 4 notas diferentes (una por cada integrante). Por lo tanto el body del HTML tendrá la siguiente apariencia:

HTML

<body>
<div id="imagen">
<div class="uno">
<a href="#">
<div class="contorno">
<div class="texto">Charlie Watts</div>
</div>
</a>
</div>
<div class="dos">
<a href="#">
<div class="contorno">
<div class="texto">Keith Richards</div>
</div>
</a>
</div>
<div class="tres">
<a href="#">
<div class="contorno">
<div class="texto">Mick Jagger</div>
</div>
</a>
</div>
<div class="cuatro">
<a href="#">
<div class="contorno">
<div class="texto">Ron Wood</div>
</div>
</a>
</div>
</div>
</body>

Por otro lado el CSS será:

CSS

#imagen {
width: 400px;
height: 300px;
position: relative; /*Muy Importante*/
background:url(image.jpg) no-repeat;
}
a {
color:#000;
text-decoration:none;
position: absolute; /*Muy Importante*/
width: 100px; /*Tamaño de todos los rectangulos*/
height: 120px; /*Tamaño de todos los rectangulos*/
}
a:hover {
border: 1px solid #fff;/*Borde interior Blanco*/
cursor: hand;
}
/*Borde exterior amarillo*/
.contorno{
display: block;
width: 104px;
height: 124px;
position: absolute;
top: -3px;
left: -3px;
}
a:hover .contorno {
border: 1px solid #D4D82D;
}
/*Posicion de cada nota*/
.uno a{
top: 25px;
left: 8px;
}
.dos a {
top: 30px;
left: 102px;
}
.tres a {
top: 10px;
left: 195px;
}
.cuatro a {
top: 25px;
left: 280px;
}
/*Reglas para mostrar el texto de cada nota*/
.texto {
position: absolute;
left: -10000px;
text-align:center;
background-color:#FFFFD3;
width: 100px;
bottom: -20px;
-moz-border-radius: 8px; /*Bordes redondeados, solo FF*/
}
a:hover .texto{
left: 0;
}

La clave del código es el parámetro position, estando este en absoluto podemos manejar el lugar donde queremos que aparescan las cajas activas. Lo mismo sucede con el texto que funciona de nota. A este último se le agregó el parámetro -moz-border-radius para tener bordes redondeados (solo para Firefox y navegadores con motor de renderizado Gecko).

Autor: Leandro Donofrio
http://www.leandrodonofrio.com/tutoriales/tutoriales/a%f1adir-notas-en-imagenes-similar-a-flickr-utilizando-css/

Usuarios que han visto este tema también han visto...

- CSS y las tablas
- Cómo eliminar el subrayado de los enlaces con CSS
- Distintos bordes de imágenes
- Evita sobrecargar tus archivos CSS
- Insertar una imagen de fondo en un TEXTAREA

- Versión imprimible de este documento

- Enviar por e-mail este documento