DOM-ROLLOVER auf Basis von DOM-Scripting und unobtrusive JavaScript

» DOM-Rollover - Download «

Dieses kleine JavaScript habe ich eben geschrieben, um ein Rollover-Funktion für eine aus Bildern bestehende Linkliste zu realisieren ohne JavaScript-Code im HTML-Quelltext zu notieren.
Damit lässt sich das Script jederzeit auf jede beliebige Bilder-Link-Liste ohne zusätzlichen Programmieraufwand anwenden.

Hier auf der Netzspielwiese ist das Script als »Portfolio auf einen Klick« in der Sidebar der Seite Portfolio in Aktion. Eine weitere sinnvolle Einsatzmöglichkeit wäre beispielsweise eine aus Bildern bestehende Website-Navigation.

Das Script lädt die Hover-Bilder voraus und wechselt bei onmouseover und onfocus zum Hover-Bild, bei onmouseout und onblurwieder zurück zum Normal-Bild.

Um das Script verwenden zu können, wird HTML-Quelltext in der folgenden Form benötigt:

<ul id="imageList">
 <li><a href="seite1.htm"><img src="image01.gif" /></a></li>
 <li><a href="seite2.htm"><img src="image02.gif" /></a></li>
 <li><a href="seite3.htm"><img src="image03.gif" /></a></li>
</ul>

Dann braucht nur noch das JavaScript in die Seite eingebunden:

 <script type="text/javascript" src="domrollover.js"></script>

und die Funktion createRollovers mit Übergabe der ID des ul-Tags der Bilderliste aufgerufen werden:

<script type="text/javascript">
// <![CDATA[
window.onload = function() { createRollovers('imageList‘) };
// ]]>
</script>

Und schon sollte das funktionieren!

Weiter zu beachten:

Die Bilder in ihrem Normal- und Hover-Status müssen in ein und demselben Verzeichnis liegen.
Die Normal- und Hover-Bilder müssen denselben Namen haben. Dem Hover-Bild wird lediglich ein “_h” angehängt.
(Im o.g. Beispiel müssten also im gleichen Ordner wie die HTML-Seiten die Bilder image01.gif, image01_h.gif, image02.gif, image02_h.gif, image03.gif und image03_h.gif liegen.)
Es können .gif und .jpg - Dateien verwendet werden, auch gemischt. Einzige Bedingung: Normal- und Hover-Bild desselben Bildes brauchen den gleichen Dateityp.

Viel Spaß beim Ausprobieren!

Falls jemand das Script einsetzt, würde ich mich über einen Hinweis sehr freuen! (um das Werk bewundern zu können :) )

Hier nochmal der » DOM-Rollover - Download «

Kommentare & Trackbacks

Kommentar von Jens Grochtdreis:

Und warum nutzt Du dafür das DOM und nicht pures CSS? Das ist doch kein Problem. Dagibt es mehrere Beispiele für.
Einfach beim hover das Bild als Hintergundbild austauschen bzw. das Bild doppelt so breit erstellen und die Position des Hintergrundbildes ändern. An Stelle des Bildes steht dann die Bildbeschreibung in der liste und wird per Einzug um ein paar tausend Pixel nach links verschoben. Das sollte doch alles möglich sein. Das einzige, was nicht geht, ist daß beim Rollover die Linien an identischen Stellen markiert werden, also die linke Außenlinie der einen Markierung die rechte Außenlinie der anderen ist. Aber das ist nur ein Designdetail.

25. Mai 2006 um 13:04
Kommentar von Franziska:

Ja, diese Vorgehensweise kenn ich auch.
Allerdings muss dafür jeder Listeneintrag eine extra ID bekommen und im CSS ein Bild und Hover-Bild definiert werden.

Wenn ich die Liste erweitern möchte, müsste ich dafür nicht nur einen neuen Listenpunkt erstellen, sondern auch noch im CSS die entsprechenden Definitionen niederschreiben.

So aber kann ich die Liste beliebig erweitern und das Rollover-Script funktioniert automatisch auch.
Ich kann dann also z.B. hier meine Portfolio-Links über Wordpress einfach einpflegen ohne das CSS extra erweitern zu müssen und z.B. jedem Listeneintrag eine ID hinzufügen zu müssen etc…

Ich find das recht praktisch :)

25. Mai 2006 um 15:01
Kommentar von Michael:

Problem sind ja immer die Besucher, die JavaScript-nicht aktivieren, daher sind i.d.R. immer Fallback-Lösungen notwendig… Von dem her bin ich auch für den Einsatz von CSS, wo es halt geht. Trotzdem danke für Dein Beispiel, was es einfach ermöglicht es per JS umzusetzen.

Ich bin derzeit an was anderem am Überlegen, was auch mit dem Laden von Bildern zu tun hat: Die Gravatare (gravatar.com) bereiten immer wieder Probleme (Ladezeiten), für WordPress gibt es IMHO 3 Plugins, 2 davon cachen die Bilder, funktioniert nur nicht wirklich.
Ich habe mir überlegt, diese im Hintergrund laden zu lassen, wenn nach einer definierten Zeit (z.B. 1 oder 2 Sekunden) das Bild nicht vollständig geladen werden konnte, wird halt kein Gravatar angezeigt. Bin mir aber noch nicht sicher, welche Technik hier sinnvoll wäre. Ajax eher nicht. PHP in Verbindung mit JS vielleicht…

6. Juni 2006 um 22:38
Kommentar von Franziska:

Hallo Michael,

danke für die Rückmeldung!

Du hast recht, man sollte darauf achten, dass alle Funktionalitäten auch ohne JavaScript weiterhin gewährleistet sind.
Bei dem DOMRollover-Script ist aber auch ohne JavaScript alles in Ordnung. Es werden lediglich die Rollover-Bilder nicht angezeigt. Das finde ich zu verschmerzen.

Für die Gravatar-Frage habe ich auch keine schnelle Lösung.
Ich denke aber mal drüber nach …

6. Juni 2006 um 23:09
Pingback: Wordpress 2.5 - nun auch bei mir im Einsatz » die Netzspielwiese » Barrierefreies Webdesign in Ludwigsburg, Stuttgart und Umgebung:

[…] Und so funktioniert dann auch mein DOM Rollover Script. […]

18. April 2008 um 16:58