Aufgabe 1:

Auf einer Seite, die als Inhaltsverzeichnis dient, befinden sich mehrere Verweise.
Um das Überstreichen eines Verweises optisch hervorzuheben, soll sich eine vor dem Verweis befindliche Grafik (z.B. Kreis, Pfeil, o.ä.) ändern (z.B. Farbe, Größe).
Beim Klicken soll sich die Grafik nochmals ändern, während nach dem Verlassen des Verweises wieder die ursprüngliche Grafik angezeigt wird.

Hinweise:

Um ein Bild zu tauschen, muss das neue Bild zunächst als Objekt deklariert werden.
Dies geschieht durch: Variable=new Image();
z.B. bild1=new Image();
bild1 ist jetzt eine neue Instanz des Image-Objektes. In der Objektreferenz findest du die wichtigsten Eigenschaften dieses Objektes. (Methoden gibt es keine.)

Wir benötigen für unsere Aufgabe die Eigenschaft src, die eine Grafik speichert. Übergeben wird die Grafik z.B. durch bild1.src="foto.jpg"
Für mehrere Grafiken ist es günstig, sie in einem Array abzulegen. In einer for-Schleife wird zunächst jedes Feldelement eine neue Instanz des Image-Objektes.
Anschließend kann den einzelnen Feldelementen die entsprechende Grafikdatei übergeben werden.

Um nun ein Bild gegen ein anderes zu tauschen, eignet sich am besten eine Funktion (nennen wir sie tauschen(Index,Bild)), der beim Aufruf 2 Parameter übergeben werden.
Der erste Parameter ist der Index des Bildes, wobei das erste Bild auf der Seite den Index 0, das zweite den Index 1 usw. hat.
Der zweite Parameter ist der Name des Bildes (bzw. der Feldindex des oben erzeugten Grafik-Arrays).
Also z.B.tauschen(1,2) ersetzt die 2. Grafik auf der Seite durch die 3. Grafik des Grafik-Feldes.

Das eigentliche Tauschen erfolgt dadurch, dass dem images-Objekt, das in der Objekthierarchie unter dem document-Objekt liegt, als Quelle die Quelle einer Instanz des Objektes Image übergeben wird.
Also z.B. document.images[1].src=Bild[2].src
Auch hier wird die 2. Grafik auf der Seite durch die 3. Grafik des Grafik-Feldes (hier: Bild[2]) ersetzt.
Eine andere Möglichkeit ist, der Grafik im img-Tag einen Namen zu geben z.B. <img name="b2" ...>. Damit könnte man auch notieren: document.b2.src=Bild[2].src

Jetzt fehlt nur noch ein Eventhandler, der das Überstreichen des Verweises "erkennt" und die entsprechende Aktion auslöst.
Wie wär's z.B. mit onMouseover?
Damit würde man z.B. schreiben:
<a href="thema1.htm" onMouseover="tauschen(2,1)"Thema 1</a>
Damit würde beim Überfahren des Links die 3. Grafik auf der Seite durch die 2.Grafik des Grafik-Feldes ersezt werden.

Jetzt muss man nur noch dafür Sorge tragen, dass beim Klicken noch eine andere und beim Verlassen wieder die alte Grafik eingesetzt wird und dies bei allen Verweisen.

Aufgabe 2:

Ändere den Bildertausch aus Aufgabe 1 so ab, dass nach dem Verlassen eines geklickten Verweises die Grafik nicht getauscht wird solange kein anderer Verweis angeklickt wird.

Hinweise:

Erstelle zunächst für jedes Ereignis eine eigene Funktion. Jede der 3 Funktionen müsste den Index des images-Objektes (also die Stelle im Dokument) als Parameter bekommen. Außerdem benötigen wir noch eine Zustandsvariable (press), die den "Index des geklickten Verweises" speichert. Als Startwert für press eignet sich -1.
onmouseover:
Diese Funktion (nennen wir sie over()) müsste im Fall, wenn press ungleich dem Index ist, den over() übergeben bekommt (d.h. der aktuelle Verweis nicht geklickt ist), die aktuelle Grafik ändern.
onmouseout:
Diese Funktion (nennen wir sie out()) müsste im Fall, wenn press ungleich dem Index ist, den over() übergeben bekommt (d.h. der aktuelle Verweis nicht geklickt ist) die aktuelle Grafik durch die urspüngliche ersetzen.
onmouseclick:
Diese Funktion (nennen wir sie clicken()) müsste die aktuelle Grafik durch die "geklickte Grafik" ersetzen und im Fall, wenn press ungleich -1 ist (d.h. bereits irgendein Verweis ausgewählt wurde), diese Grafik durch die ursprüngliche ersetzen. Zum Schluss muss press auf den Index der aktuellen Grafik aktualisiert werden.