[CSS] Opisywanie zdjęć a’la Nasza Klasa lub Facebook
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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>
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;
}
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 osiągnąłem zamierzony efekt.
Zapraszam do obejrzenia demo z tego artykułu TUTAJ.
O autorze
