Bildwechsel per Mouseover ohne JavaScript und Preloader
Veröffentlicht: 25. Mai 2007, 10:40 Uhr
Jeder kennt die Mouseover-Effekte bei denen eine bestehende Grafik beim Bewegen des Mauszeigers durch eine andere ausgetauscht wird. Dies sieht nicht nur hübsch aus sondern ist auch sehr hilfreich, wie etwa bei Vorher-Nachher-Vergleichen.
Die JavaScript-Technik
Doch schauen wir uns zunächst einmal an wie ein solcher Effekt mit JavaScript realisiert wird. Über die Events onmouseover und onmouseout des img Tags wird eine Funktion aufgerufen. Diese tauscht die derzeit abgebildete Grafik durch eine andere aus sobald der Mauszeiger sich über dieser befindet. Verlässt der Mauszeiger diese wieder, so wird die ursprüngliche Grafik wiederhergestellt.
Das Problem bei dieser Technik besteht darin, dass die Grafik ohne Preloading erst beim onmouseover Event geladen wird. Je nach Bildgröße kann dies ein paar Sekunden dauern. Um dies zu verhindern wird meist eine weitere Funktion integriert: Diese lädt die Grafik bereits beim Laden der Seite in den Browser-Cache und verhindert so die Wartezeit beim Bildwechsel.
Nachteile
Es liegt auf der Hand, dass Benutzer mit deaktiviertem JavaScript in die Röhre gucken. Des weiteren wird durch das Preloading die Ladezeit der Webseite unnötig verlängert. Es sei außerdem darauf hingewiesen das eine Barrierefreiheit in diesem Fall nicht gegeben ist. Ganz davon abgesehen das der Einsatz von JavaScript für einen solch simplen Effekt unnötig ist, da dies mittels CSS wesentlich schneller und unkomplizierter realisiert werden kann.
Die Theorie
Mit Hilfe der Pseudoklasse :hover können wir auch per CSS Mouseover-Effekte realisieren. Hierbei gilt aber zu beachten, das der Internet Explorer dies noch immer nicht für alle Elemente unterstützt – wie es eigentlich sein sollte. Um die Kompatibilität unter allen Browsern zu gewährleisten müssen wir die Verwendung von :hover also auf a Tags beschränken.
Um beim Bildwechsel nicht eine weitere Grafik laden zu müssen verwenden wir einen einfachen, aber simplen Trick: Anstelle von zwei Grafiken (A und B) erstellen wir nur eine. Diese beinhaltet sowohl A als auch B, wobei Grafik B direkt am rechten Rand von A angefügt wird.
Die Auflistung
Zunächst erstellen wir uns den entsprechenden Quelltext um ein oder mehrere Grafiken mit diesem Effekt zu versehen. Aus Gründen der Barrierefreiheit verwenden wir hierzu eine simple Auflistung vom Typ ul und benennen die Klasse “mouseover”.
<ul class="mouseover"></ul>
Einträge
Einträge definieren wir – wie sollte es auch anders sein – innerhalb der Auflistung mit li. Aus Gründen der bereits oben angesprochenen Beschränkung des Internet Explorers ist es unverzichtbar ein Link-Element vom Typ a zu integrieren.
<ul class="mouseover">
<li>Abbildung 1<br />
<a href="#"><img src="grafik.jpg" alt="" /></a>
</li>
</ul>
Wer seiner Grafik noch eine Vollansicht hinzufügen möchte kann das href Attribut statt mit einer # (Raute) mit dem Link auf die entsprechende URL versehen. Der Text “Abbildung 1” ist optional, bei mehreren Grafiken aber sicherlich hilfreich.
CSS
Zunächst deklarieren wir die Auflistung ul und setzen sowohl padding als auch margin auf Null, da wir in diesem Fall keine Einrückung haben möchten.
ul.mouseover {
margin: 0;
padding: 0;
}
Im nächsten Schritt beginnen wir damit den Listeneintrag zu deklarieren. Dafür positionieren wir diesen relativ zum oberen Element. Anschließend weisen wir dem Element eine feste Breite zu. Dieser Wert muss exakt die Hälfte der eigentlichen Länge der Grafik aufweisen. Der Rest der Grafik wird durch die Eigenschaft overflow quasi abgeschnitten bzw. per “hidden” einfach versteckt. Warum erkläre ich später.
ul.mouseover li {
position: relative;
overflow: hidden;
width: 250px;
}
Kommen wir nun zur eigentlichen Grafik, dem img Element. Dieses positionieren wir ebenfalls relativ, weisen ihm die Größenangabe der Grafik zu und setzen die Rahmenstärke auf Null.
ul.mouseover li a img {
position: relative;
width: 500px;
height: 188px;
border: 0;
}
Der eigentliche Trick besteht in der Deklaration der :hover Pseudoklasse. Mit Hilfe dieser verschieben wir die Grafik um exakt die Hälfte nach Links. Somit wird beim Bewegen des Mauszeigers über die Grafik statt dem Linken Teil (A) nun der rechte (B) angezeigt.
ul.mouseover li a:hover {
position: relative;
left: -250px;
}
Beispiel
Vor dem Mouseover wird der linke Teil der Grafik angezeigt, der innere Rahmen um Bereich A stellt die definierte Breite im li Element dar. Der Bereich B wird durch die Eigenschaft overflow abgeschnitten.
Während dem Mouseover wird die Grafik von rechts um die Hälfte nach links verschoben, es wird folglich der Bereich B nun dargestellt.
Ein vollständiges Beispiel inklusive Quelltext und Beispielgrafik findet sich hier.
patrik schrieb am 28. Oktober 2009, 09:30 Uhr
Vielen Dank! Genau das hatte ich gesucht – super erklärt! top! besten Gruß Patrik