Tips: Links mit individuellen Grafiken verknⁿpfen (CHIP 9/2001)

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.