Erweiterungen - Entwicklungen » on-Mouse-Over-efekt

#1 von foenix ( Gast ) , 09.07.2007 09:54

Jeder kennt diesen Efeckt: man fährt mit der Maus über einen Button und der ändert sein Aussehen bei der ersten Berührung mit der Maus. Dies ist der sogenannte OnMouseOver-Efcekt. Wie entsteht er?

Zuerst einmal benötigt man 2 gleichgroße Grafiken:
Vorher

Nachher

Dann benötigt man ein Script, welches die Buttons "in Bewegung" bringt. Die meisten Scripte, die es frei zum Einbau in die Website gibt, sind für Anfänger schon recht kompliziert. Ich habe jedoch ein kleines Script gefunden,den ich ein wenig bearbeitet habe!mit dem auch Anfänger umgehen können. So sieht das Ergebnis aus:
So entsteht auch mit einfachen Schaltflächen ein schöner Efcekt. (Wenn Sie auf die Grafik in diesem Beispiel vom link klicken, gelangen Sie zur Foreninformation Übersichtsseite zurück.

Das Script sieht wie folgt aus:

In Antwort auf:
<a href="ihre verlinkung.html" onMouseOver="image.src='ihr-bild-link.gif';" onMouseOut="image.src='ihr-bild-link2.gif';" >
<img name="image" src="ihr-bild-link2.gif" border="0" ></a>

Kleiner Hinweis noch zu dem Script:

In Antwort auf:
wenn Sie mehrere Buttons mit diesem OnMouseOver-Efecekt auf eine Seite setzen möchten, so müssen Sie bei image.src und bei img name="image" immer eine andere Bezeichnung als bei den ersten Bildern machen, sonst klappt der Efeckt nicht. Also bei dem 2. Bild z.B. ...onMouseOver="image2.src... und img name="image2", beim 3. Bild ...onMouseOver="image3.src... und img name="image3" usw.

Viel Spaß damit.