[CSS] Opisywanie zdjęć a’la Nasza Klasa lub Facebook

Postanowiłem zaprezentować ciekawą technikę tworzenia mapy odnośników na zdjęciach na bazie CSS. Taka mapa może się przydać w wielu sytuacjach, na przykład w tworzeniu własnej galerii zdjęć, gdzie chcemy by po najechaniu myszką na czyjąś twarz pojawił nam się jakiś zdefiniowany przez nas napis lub gdy chcemy zrobić ciekawą reklamę na bazie zdjęcia, gdzie jednocześnie umieszczamy linki do proponowanych przez nas stron.

W tej poradzie bardzo przydatnym narzędziem będzie IrfanView, bo dzięki niemu będzie można zlokalizować położenie obiektu na zdjęciu. Jeśli nie masz, polecam go ściągnąć stąd.

W tej poradzie wykorzystam następujące zdjęcie:

Najpierw tworzymy prosty kod HTML:

<dl id="obiekty">
    <dd id="statek"><a href="#"><span>Statek</span></a></dd>
    <dd id="parasol"><a href="#"><span>Parasol</span></a></dd>
    <dd id="chmura"><a href="#"><span>Chmura</span></a></dd>
    <dd id="palma"><a href="#"><span>Palma</span></a></dd>
</dl>

Jak zauważyłeś, korzystam ze znaczników dl i dd, gdzie dl - lista definicji, a dd - opis definicji.
Teraz dodamy pierwsze style CSS do naszego pliku HTML:

body {
	font-family: Tahoma, sans-serif;
	font-size: 11px;
	background-color: #FFFFFF;
}
dl#obiekty {
	background: url(foto.jpg);
	height: 600px;
	width: 800px;
	position: relative;
}
dd {
	margin: 0;
	padding: 0;
	position: absolute;
}

Zastosowałem resetowanie dla elementów dd. Natomiast w dl#obiekty podałem jako tło mój obrazek oraz jego wymiary.
Teraz pora na wstawienie opisu dla chmurki. W IrfanView należy otworzyc wybrane zdjęcie, następnie zrobić zaznaczenie myszką - klikając lewy przycisk myszy i zaznaczając wybrany obszar.

I tak dla naszej chmurki styl wygląda następująco:

dd#chmura {
	left: 321px;
	top: 76px;
}
dd#chmura a {
	position: absolute;
	width: 127px;
	height: 116px;
	text-decoration: none;
}
dd#chmura a span{
	display: none;
}
dd#chmura a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: 100%;
	margin: 0;
	padding: 5px;
	width: 45px;
}

W ten sposób dodaliśmy styl dla obszaru w którym się będzie pojawiał napis "Chmura". Wskazałem początek obszaru za pomocą top i left w dd#chmura oraz jego wymiary w dd#chmura a, a następnie zapisałem, że napis ma się pojawiać tylko w czasie najazdu myszką na obszar (a:hover span).
W ten sposób osiągnąłem zamierzony efekt. Zapraszam do obejrzenia demo z tego artykułu TUTAJ.