Rollover-Image mit nur einem Bild

Bei einem meiner letzten Streifzüge durchs Netz auf der Suche nach interssanten CSS-Techniken, begegnete mir diese, mir bis dato unbekannte Technik ein Rollover-Image zu erzeugen.

In diesem Beipiel wird ein Rollover-Image erstellt, welches nur ein einziges Bild beinhaltet, nicht wie allgemein bekannt und angewendet zwei seperate Bilder.

Als erstes erstellt man einen einfachen Text-Link, dieser wird per CSS durch ein Bild ersetzt. Der Code dafür kann so aussehen:

HTML:

<a href=”#”>Rollover-Link</a>

CSS:

span {
display: none;
}

a {
display: block;
width: 100px;
height: 100px;
border: 3px double #000;
background: url(link.jpg) no-repeat;
}

Das Image wird nun mit 100px Höhe und 100px Breite angezeigt. Doch wie soll man damit ein Rollover erstellen können?

Die Antwort ist einfach und genial zugleich, denn das Bild wird durch die Styleanweisung lediglich mit den Abmessungen 100px * 100px angezeigt, seine tatsächlichen Maße sind aber 100px in der Breite und 200px in der Höhe.

Bei a:hover wird nun die Position des Hintergrundbildes um -100px an der Y-Achse verändert, und schon erscheint die zweite Hälfte des Bildes wenn man über den Link fährt. Der CSS-Code lautet dazu:

a:hover {
background-position: 0 -100px;
}

Das Schöne an dieser Art und Weise ein Rollover zu erstellen ist, dass es kein zweites Bild gibt was, erst in dem Moment geladen wird wenn der Mauszeiger über den Link läuft. Es ist bereits geladen worden wenn man den Link zu sehen bekommt, und man hat keine häßlichen Ladeeffekte denn das Bild ist ja bereits geladen worden.

Beispiel ansehen

Genial einfach …

Leave a Reply