Homepage HTML Codes Bildwechsel erzeugen, beim Drüberfahren mit der Maus. Mouse Over Effekt

Viele haben auf der eigenen Homepage Bild und auch Menüs durch Bilder gestaltet, bei denen sich das Bild ändert, sobald man mit der Maus darüber fährt. Wird auch gern als Mouseover Effekt bezeichnet. Wie man diesen Mouse-Over Effekt mit einem kleinen Java Script erzeugt zeigt ich euch im folgenden Artikel.

der Bildwechsel Ein Bildwechsel sind Bilder, die sich entweder ändern, wenn der Mauszeiger darüber bewegt wird (Mouse-Over Effekt) bzw., wenn das Bild angeklickt wird.
Beispielquelltext <!DOCTYPE HTML PUBLIC „*-//W3C//DTD HTML 4.01 Transitional//EN“>
< html >
< head >
< title >
Bildwechsel < /title >
< script language= „JavaScript“ >
<!–
/*
##############
# Definition Bilder  #
##############
*/

out0= new  Image();
out0.src=
„bild_out.png“
over0= new  Image();
out0.src=
„bild_over.png“
click0= new  Image();
click0.src=
„bild_over.png“
<!–
/*
##############
# Funktion               #
##############
*/

funktion bildwechsel( bildnr, event) {
window . document .images [ bildnr ] .src=eval( event + bildnr + ‚.src‘) ;
}
//–>
< /script >
< /head >
< body >
< a href=„#“ onMouseOver=“bildwechsel(0 , ‚over‘)
onMouseOut=“bildwechsel (0 , ‚out‘)
onClick=“bildwechsel (0 , ‚click‘) >
< img src=„bild_out.png“ border=„0“ width=„110“ height=„28“ > < /a >
< /body >
< /html >
so sieht sieht der Mouse Over Effekt aus aus
Klicken Sie auf das Bild um die gesamte Seite dargestellt zu bekommen,
und um die Bildwechselfunktion zu testen.
Fahren Sie über das Bild und klicken Sie auch.

Dies war das Beispiel für einen Mouse Over Effekt mit Java Script, wie wir es auch in der Ausbildung durchgenommen haben. Ich hoffe allen die zu diesem Thema ein paar Fragen hatten könnte damit geholfen werden.

Artikel zu Download: Artikel Homepage HTML Codes Bildwechsel erzeugen, beim Drüberfahren mit der Maus. Mouse Over Effekt (844)

Weitere Beiträge in dieser Reihe sind:

Teil 1 HTML Grundgerüst einer Webseite

Teil 2 HTML Code für Linkeinträge oder Verweise auf einer Webseite einfügen

Teil 3 Homepage HTML Codes Bilder oder Fotos einfügen

Teil 4 Homepage HTML Codes Tabellen einfügen

Teil 5 Homepage HTML Codes Listenpunkte bzw. Aufzählung einfügen

Teil 6 Homepage HTML Codes Frameset und was ein Frameset ist

Teil 7 Homepage HTML Codes Formulare erstellen und Formular Elemente

Über Michael Bergler 679 Artikel
Mein Name ist Michael Bergler ich stamme aus Sachsen und habe seit 10 Jahren die Leidenschaft mich mit HTML, PHP, Bildbearbeitung und Perl zu beschäftigen. Seit 2011 lebe ich in Chemnitz und arbeite als Selbständiger in dem Bereich Informationstechnologie (IT), Büroservice und Telefonmarketing. In meinem Blog, online seit Dezember 2010, geht es um die Ausbildung zum IT-Systemkaufmann, Games und alles rund um den PC. Von daher lag es nah eine Umschulung 2006 – 2009 in dem Beruf IT-Systemkaufmann zu absolvieren, welche ich dann auch im Januar 2009 erfolgreich abgeschlossen habe. Ich bin in Leipzig geboren und in der Umgebung von Dresden aufgewachsen.

1 Kommentar

Kommentar verfassen