Rollover-Effekt für Buttons (mit JavaScript)

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Rollover-Effekt für Buttons (mit JavaScript)

Beitrag von Admin » Di 19. Aug 2014, 16:09

Um einen Button z.B. eingedrückt erscheinen zu lassen, wenn man mit dem Mauszeiger darüber fährt, braucht man mindestens zwei Versionen der Button-Grafik: eine im Normalzustand und eine Version, die erscheinen soll, wenn mit der Maus darüber gefahren wird; optional kann man auch weitere Grafiken anfertigen für den Zustand des Buttons, wenn man darauf klickt oder ihn mit dem Mauszeiger wieder verlässt.

Ist der "normale" Button auf der Seite eingefügt und verlinkt, macht man einen Doppelklick darauf und drückt im folgenden Dialog den "Erweitert"-Button rechts unten. Dort geht man oben auf den Reiter JavaScript.
Unten rechts wird dann aus dem Dropdownfeld zunächst "onmouseover" ausgewählt und in das Feld rechts

Code: Alles auswählen

this.src="bilder/button2.gif"
eingetippt (in diesem Beispiel heißt die Grafik mit dem eingedrückten Button button2.gif und liegt in dem Unterordner bilder, das muss ggf. entsprechend verändert werden).

Damit der Button nicht eingedrückt bleibt, wenn die Maus ihn wieder verlässt, wird als nächstes links "onmouseout" ausgewählt und rechts

Code: Alles auswählen

this.src="bilder/button.gif"
eingetippt.
Dieses Tutorial wurde am 19.01.2008 von ill66 für KompoZer-Web erstellt.

Antworten