Links mit individuellen Grafiken verknüpfen

Sie möchten Ihre Homepage mit dynamischen Effekten aufpeppen. Dazu wollen Sie an einer bestimmten Stelle der Seite Bilder zeigen, wenn der Anwender seinen Mauszeiger über die Links auf der Seite führt. Welches Bild der Browser darstellt, bestimmt der jeweilige Link

Diese Animation können Sie mit einem JavaScript verwirklichen. Zuerst müssen Sie die Position des Wechselbildes auf Ihrer Homepage bestimmen. Dies geschieht mit Hilfe des folgenden HTML-Befehls 


»<IMG>«:

<IMG SRC=ôä NAME=ôcoverô>


Wichtigstes Attribut dieses Befehls ist »SRC«, es gibt das anzuzeigende Bild an. Da der Browser erst dann eine Grafik darstellen soll, wenn der Cursor über einem Link liegt, bleibt es zunächst unbelegt. Auch das Attribut »NAME« ist sehr wichtig, um den 
»<IMG>«
-Befehl später als eigenes Objekt Ihrer HTML-Seite ansprechen zu können. Im Beispiel heißt dieses Objekt »cover«. Das nächste Element ist eine JavaScript-Funktion mit dem Namen »zeigeBild()«. Die Aufgabe dieser Funktion besteht darin, dem Objekt »cover« die anzuzeigenden Bilder zuzuweisen. Ergänzen Sie den Kopf Ihres Dokuments im Bereich zwischen den Befehlen


»<HEAD>« und »</HEAD>«


um folgende Zeilen:


<SCRIPT language=ôJavaScriptô>
 function zeigeBild(neuesBild) {
   document.cover.src = neuesBild;
 }
</SCRIPT>


Die Funktion schreibt den übergebenen Parameter in das Attribut »SRC« des Objektes »cover«. Jetzt geben Sie folgende Befehle in die Links der Seite ein:


<A href=ôhttp://www.chip.deô
onmouseover=ôzeigeBild(chip_cov.jpg)ô
onmouseout=ôzeigeBild(æÆ)ô>
CHIP
</A>


Das Attribut »HREF« gibt jeweils das Ziel des Links an. Neben diesem normalen Attribut eines Links nutzen Sie zusätzlich die Ereignisse »onmouseover« und »onmouseout«. Das erste Ereignis tritt ein, wenn der Mauszeiger über den modifizierten Link fährt, das zweite Ereignis dann, wenn sich der Mauszeiger von diesem Link wegbewegt.
In beiden Fällen führt das Skript auf Grund des eingetretenen Ereignisses die Funktion »zeigeBild()« aus. Die beiden Aufrufe unterscheiden sich nur durch den jeweiligen Aufrufparameter. Das Ereignis »onmouseover« tritt ein, wenn der Mauszeiger auf dem Link liegt. In diesem Fall werden der Name und der relative Pfad des Bildes übergeben, das Sie im Objekt »cover« darstellen möchten. Beim Ereignis »onmouseout« belegen Sie den Aufrufparameter mit einer leeren Zeichenkette, repräsentiert durch »ÆÆ«. Auf diese Weise entfernt der Browser das Bild wieder, sobald sich der Mauszeiger vom Link fortbewegt.