Grafik mit Mausberührung ändern lassen

Manchmal kann es sinnvoll sein, eine Grafik mit Mausberührung ändern zu lassen. JavaScript macht dies möglich. Sobald der Mauszeiger das Bild berührt, ändert sich dies zu einem anderen Bild.

In diesem Artikel zeige ich dir, wie das mit JavaScript funktioniert.

 

Grafik mit Mausberührung ändern lassen

Um eine Grafik mit Mausberührung ändern lassen zu können, brauchst du nur das folgende JavaScript in deine Website einbauen.

 

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 jedoch 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.

 

Alternative

Das hier genannte Script funktioniert natürlich nur dann, wenn der User JavaScript im Browser aktiviert hat. Hat der Anwender es deaktiviert oder lässt es durch ein Plugin blocken, funktioniert es hingegen nicht. Auch sollte man immer im Kopf behalten, dass zu viele JavaScripts die Performance der Website in den Keller ziehen. Das ist zudem besonders auf Mobilgeräten ärgerlich.

Es gibt jedoch auch eine Alternative. Du kannst mit CSS bspw. einen ähnlichen Effekt erzeugen. Nähere Informationen dazu findest du im Artikel „Bildwechsel bei Mouseover mit CSS„.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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