Añadir notas en imágenes (similar a Flickr) utilizando CSS
sábado, 21 de abril de 2007
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.
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:
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)
Comentarios (20)
