Bild-Navigation mit CSS
Wie ich all die Adventskaldender mit Javascript zur Steuerung (z.Bsp Uli Stein) gesehen habe dachte ich mir, so etwas m?sste doch auch mit reinem HTML und CSS realisierbar sein. Herausgekommen ist dieses:
Als erstes habe ich mir auf www.flickr.com einen Weihnachtsbaum gesucht. Diesen habe ich dann mit Hilfe von Gimp in 3, gleich grosse Teile unterteilt und jeder dieser Teile mit der dazugeh?rigen Adventsnummer (Ha! ein neues Wort) versehen.
Aus Bequemlichkeit zeige ich diese Technik hier nur mit den letzten 3 Tagen der Adventszeit, aber nat?rlich funktioniert es auch mit einer beliebigen Anzahl von Bilder.
Jetzt geht es an das "Zusammenbasteln". Zuerst einmal der HTML-Code mit 3 DIV's f?r die einzelnen Teile. In diesem Beispiel ?ffnet sich bei jedem Anklicken eines T?rchens ein externer Link. Nat?rlich k?nnen hier auch Bilder, interne Links, Doumente oder was auch immer angesteuert werden.
<div class="top_pic"> <a href="http://www.flickr.com"></a> </div> <div class="bottom_left_pic"> <a href="http://www.oswd.org"></a> </div> <div class="bottom_right_pic"> <a href="http://www.csszengarden.com"></a> </div>
Als n?chstes wird pro Bildeinheit ein DIV erstellt und absolut positioniert. Diesen DIV's weisen wir die dazugeh?rigen Hintergrundbilder zu.
div.top_pic {
background: url(images/top.gif) no-repeat;
position: absolute;
left: 72px;
top: 10px;
width:127px;
height: 183px;
}
div.bottom_left_pic {
background: url(images/bottom_left.gif) no-repeat;
position: absolute;
left: 10px;
top: 193px;
width:127px;
height: 183px;
}
div.bottom_right_pic {
background: url(images/bottom_right.gif) no-repeat;
position: absolute;
left: 127px;
top: 193px;
width:127px;
height: 183px;
}
Im n?chsten Schritt, werden die Link-Elemente der einzelnen DIV's in Block-Elemente verwandelt und ihnen wird die Breite und H?he des Hintergrundbildes zugewiesen.
Dies bewirkt, dass beim Anw?hlen des Bildes nicht nur der Link selber, sondern das ganze Bild aktiv wird.
a {
display: block;
width: 127px;
height: 183px;
}
Jetzt m?ssen wir nur noch daf?r sorgen, dass dem Benutzer beim Anw?hlen des gew?nschten T?rchens eine Information zum ?ffnen angezeigt wird. Hier verwenden wir f?r die Benutzersteuerung ein Image mit integriertem Text. Der Code dazu:
a:hover {
background: url(images/door.gif) no-repeat center bottom;
}
Zurück