Button ändern beim Anklicken Rollover-Effekt

Das sollte Dir helfen

Rollover-Effekt
[Ein unkompliziertes Script.]

Dieser Effekt wird auf vielen Websites verwendet, um beim Darüberfahren mit der Maus über ein Image einen Rollovereffekt zu erzielen. Das geschieht durch ein JavaScript, welches beim Aktivieren mit der Maus (Rollover) einfach das Image mit einem andern austauscht.

Dazu braucht man nichts weiter als zwei Grafiken. Die eine wird z.B. als Link verwendet und die andere zum Austauschen des Bildes, wenn die Maus sich darüber befindet.

Die beiden Grafiken einzeln:
Beiden Grafiken mit JavaScript:


Die Rollover-Funktion können Sie an der rechten Grafik ausprobieren ausprobieren.

Die erste Grafik nennen wir button.gif und die zweite button_r.gif. Das »_r« zeigt uns, dass es sich um die Grafik für den Rollover handelt.

Das Script
... ist recht einfach. Die Stellen, die sich von einem einfachen Hyperlink unterscheiden sind rot gekennzeichnet. Die Plazierung der Grafiken darin ist blau:

<a href="ziel.html" onMouseOver="document.b1.src='button_r.gif'" onMouseOut="document.b1.src='button.gif'">
</a>

Wichtig ist, dass Sie in die ursprüngliche Grafik – die vom Link umschlossen wird – die Bezeichnung name="b1" einfügen. Damit weiss das JavaScript, bei welcher Grafik der Rollover-Effekt stattfinden soll.
Falls die Grafiken in einem anderen Ordner liegen müssen Sie zusätzlich zu den Grafik-Namen noch den Pfad angeben (z.B.: ../images/button.gif).

Mehrere Rollover
Um das Script für weitere Rollover in einer HTML-Datei verwenden zu können, muss das Script und der Image-Tag an folgenden Positionen angepasst werden:

<a href="ziel2.html" onMouseOver="document.b2.src='button2_r.gif'" onMouseOut="document.b2.src='button2.gif'">
</a>


Bei der Verwendung weiterer Rollover-Effekte ersetzen sie die Zahlen fortlaufend.