Rolloverbilder erstellen mit JavaScript

Rolloverbilder erstellen mit JavaScript

Wie erstellt man Rolloverbilder mit JavaScript:

Mit JavaScript können Internetseiten auf Ereignisse reagieren, bzw. sie werden durch Ereignisse gesteuert.
So ein Ereignis ist z. B. ein Mausklick, das Überfahren mit der Maus, etc.

Ein Rolloverbild ist eine Grafik, die durch Überfahren mit der Maus ausgetauscht wird.

Beispiel:

Auf einer Internetseite ist ein gelber Smiley zu sehen:

sobald man mit der Maus drüberfährt ist ein pinker Smiley zu sehen:

Hier kann man sich das Ergebnis anschauen.

Hier der erforderliche Quellcode:

Der rot hinterlegte Teil ist der JavaScript-Teil.

Im img-Tag wird face1.jpg (Name des gelben Smileys) als Quelle festgelegt, d. h. er wird immer angezeigt.
Er bekommt den Namen 'Gesicht' (ist eine Variable).
Nun beginnt die 'Ereignis-Programmierung':
onMouseOver: Es wird festgelegt, dass, sobald man mit der Maus auf den gelben Smiley kommt, die Quelle für die 'Variable' Gesicht, der pinke Smiley ist. Name des pinken Smileys: face2.jpg.
onMouseOut: Es wird festgelegt, dass, sobald man den pinken Smiley mit der Maus verlässt, die Quelle der Grafik wieder der gelbe Smiley ist.

So ist es auch möglich, z. B. auch Buttons für die eigene Homepage zu erstellen. Häufig wird hierzu in einem Grafikprogramm ein Button erstellt. Der Text wird einmal in dunkler Farbe geschrieben und gespeichert. Dann wird genau derselbe Button noch einmal geöffnet, und der Text in einer helleren Farbe geschrieben. So merkt man beim Überfahren des Buttons nicht, dass eine 2. Grafik hinterlegt ist. Man sieht lediglich, dass die Schriftfarbe sich ändert. Wichtig hierbei: Bitte die exakt gleiche Grafik benutzen für beide Buttons. Auch darf die Schriftart (bis auf die Farbe) nicht geändert werden. Es soll ja nicht ersichtlich sein, dass es sich um 2 Grafiken handelt. Wenn dieser Button dann in die Internetseite eingebaut wird, muss dann natürlich auch noch verlinkt werden. Einfach den erforderlichen html-Code noch in den 'img'-Tag einfügen.

Auch ist es mit dieser Funktion möglich, kleine Fotos auf der Homepage zu veröffentlichen, und sobald man mit der Maus darüberfährt, erscheint das Foto in größer. Hierzu einfach das Foto in klein und einmal in groß speichern.