Grafik bei Mausberührung ändern lassen

Manchmal kann es sinnvoll sein, eine Grafik bei Berührung mit der Maus wechseln zu lassen. Möglich gemacht wird dies durch ein wenig Unterstützung eines JavaScripts. Sobald der Mauszeiger das Bild berührt, ändert sich dies zu einem anderen Bild.

Füge dazu einfach das folgende JavaScript in deine Webseite ein.

 

Code-Beispiel:

<html>
 <head>
 <script language="JavaScript">
 <!--
 i01 = new Image();
 i01.src = "bild1.gif"; /* 1. normale Grafik */
 i02 = new Image();
 i02.src = "bild2.gif"; /* 1. Grafik bei Mausberührung */
 
 i03 = new Image();
 i03.src = "bild3.gif"; /* 2. normale Grafik */
 i04 = new Image();
 i04.src = "bild4.gif"; /* 2. Grafik bei Mausberührung */
 
 function BildVeraendern(ImageName, ImageObjektName)
 {
     // ImageName - Name des auszutauschenden Bildes
     // ImageObjektName - Name des Bildes mit dem ausgetauscht wird
     document.images[ImageName].src = eval(ImageObjektName + ".src")
 }
 //-->
 </script>
 <title>Grafik bei Mausber&uuml;hrung &auml;ndern lassen</title>
 </head>
 <body>
 
 <img src="bild1.gif" name="urlaub" onMouseOver="BildVeraendern('urlaub', 'i02');" onMouseOut="BildVeraendern('urlaub', 'i01');">
 <br /><br />
 <img src="bild3.gif" name="ostern" onMouseOver="BildVeraendern('ostern', 'i03');" onMouseOut="BildVeraendern('ostern', 'i04');">
 
 </body>
 </html>

 

Hinweis:

Setze Effekte dieser Art nicht übermäßig ein. In den meisten Fällen wirken diese Effekte eher ablenkend als hilfreich. Sei also sparsam, um deine Besucher nicht zu vergraulen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.