Bildwechsel

Nehmen wir an, wir haben schöne grafische Buttons erstellt, welche zwei Zustände haben: an und aus. Der Aus-Button wird ganz normal mit HTML eingebunden. Jetzt möchten wir aber, dass wenn der Besucher mit der Maus über den Button schwebt, das Bild ausgetauscht werden soll mit dem An-Button. Als Beispiel probieren sie oben rechts meine Buttons.

Für HTML-Tags gibt es die Event-Handler "onmouseover" und "onmouseout". Diese führen dann JavaScript-Code aus, wenn die Maus über dem Element schwebt, oder diese das Element wieder verlässt. Hängen wir diese einfach an unser Bild.

<img src="Button-Aus.jpg" width="50" height="50"
onmouseover="bildwechsel();"
onmouseout="bildwechsel();" />

In beiden Fällen rufen wir eine Funktion "bildwechsel", welche dann ausgeführt wird. Diese müssen wir natürlich erst ein Mal schreiben.

<script type="text/javascript">
function bildwechsel(bildname,bildquelle) {
   document.getElementById(bildname).src = bildquelle;
}
</script>

Der Funktion übergeben wir zwei Parameter. Welches Bild im HTML-Dokument ersetzt werden soll "bildname", und welches Bild eingesetzt werden soll "bildquelle". Dazu müssen wir unserem Bild aber noch einen Namen geben mit "id".

<img src="Button-Aus.jpg" width="50" height="50"
id="meinButton"
onmouseover="bildwechsel('meinButton', 'Button-An.jpg');"
onmouseout="bildwechsel('meinButton', 'Button-Aus.jpg');" />

Können wir uns nicht sparen den Bildnamen mit anzugeben? Ja, wir könnten in unserer Funktion den Namen einfach eintragen. Aber so haben wir eine Funktion, die wir für alle Buttons verwenden können.

Problem

Jetzt werden viele bemerken, dass es bei dem "onmouseover" eine Weile dauert, bis das Bild wechselt. Das liegt daran, dass das zweite Bild in diesem Moment erst geladen werden muss. Um das zu verhindern, sollten die Bilder schon vorher mit geladen werden. Dies nennt sich dann "Preloader", dafür gibt es verschiedene Lösungen.

  1. HTML-Preloader
    Die Bilder werden per HTML mit eingebunden, versteckt mit Breite und Höhe von 1 Pixel.
     
  2. CSS-Preloader
    Bilder werden per HTML eingebunden, und mit CSS entweder aus dem Bild verschoben, oder mit "display:none" versteckt.
     
  3. JS-Preloader
    Ein keines Script lädt die Bilder direkt in den Cache des Browsers.