Mouse-Over / Roll-Over

Wer hat Sie nicht schon einmal gesehen, die kleinen Grafiken oder Links, die sich beim Überfahren verändern. So etwas nennt man "Roll-Over" oder auch "Mouse-Over".

Um soetwas zu realisieren benötigt man unser Script und natürlich 2 Grafiken. Eine davon, die immer angezeigt wird und eine, die beim Überfahren der Grafik angezeigt wird. Zuguterletzt verknüpfen wir das noch mit einem Link.

Das Ganze geht also so: Sie erstellen eine Grafik, die den Normalzustand des Bildes darstellen soll, also wenn niemand darauf klickt oder mit der Maus darüber fährt. Diese nennen Sie z.B. normal.gif. Dann erstellen Sie eine Grafik, die z.B. mouse_over.gif heisst und angezeigt werden soll, wenn die Maus über die Grafik fährt. Dann können Sie diesen Code benutzen, Sie müssen nur noch die Pfadangaben anpassen.

Fügen Sie diesen Code an der Stelle ein, an der der Roll-Over dargestellt werden soll:

<a href="http://link.auf/die/gewünschte/seite.html"
  onmouseover="image1.src='grafiken/mouse_over.gif';"
  onmouseout="image1.src='grafiken/normal.gif';">
    <img name="image1" src="grafiken/normal.gif" border="0">
</a>

Möchten Sie den Code von oben für mehrere Grafiken verwenden, ist dies ebenfalls sehr einfach möglich. Im img-tag ist dies zu finden: name="image1". Damit teilen Sie dem Browser einen Namen für dieses Bild mit. Schauen Sie nun einmal in den Link (