Bilderwechsel mit Javascript

Willemers Informatik-Ecke

Diese Seite soll zeigen, wie mit Javascript ein Bild umgeschaltet werden kann, wenn man mit der Maus darüber fährt.

Zunächst werden zwei Bilder gebraucht. Das erste ist das Standardbild und das zweite soll erscheinen, wenn mit der Maus über das Maus gefahren wird. Beide Bilder müssen natürlich gleich groß sein.

Das Bild, wie es ohne Maus aussieht.
Das Bild, wie es mit Maus aussehen soll.
Das Bild soll in ein Adressfeld eingebettet werden, dass auf die Verlagsbestellseite für das abgebildete Buch zeigt. 

<a href="http://www.galileocomputing.de/katalog/buecher/titel/gp/GPP-unixguru/titelID-769">
<img src="../unix/gurucover.gif" width=118 height=167 border=0 alt="Guru-Buch" name="bookPic">
</a>

Wichtig ist, dass dem img-Tag ein Name zugeordnet wird, in diesem Fall der Name bookPic. Im nächsten Schritt sollen dem Adress-Tag die Ereignisreaktionen zugewiesen werden. Die Ereignisse lauten OnMouseOver und OnMouseOut. In dem jeweiligen Fall wird dem img ein neues Bild untergeschoben werden. Der einfachste Ansatz wäre der folgende: 

<a 
  href="http://www.galileocomputing.de/katalog/buecher/titel/gp/GPP-unixguru/titelID-769" 
  language="JavaScript"
  OnMouseOver="document['bookPic1'].src=../unix/gurubest.gif" 
  OnMouseOut="document['bookPic1'].src=../unix/gurucover.gif">
<img src="../unix/gurucover.gif" width=118 height=167 border=0 alt="Guru-Buch" name="bookPic1">
</a>

UNIX-Guru-Buch Auf der linken Seite ist die entsprechende Umsetzung und es funktioniert tatsächlich nicht. Zuerst müssen die Bilder, die beim Überstreifen der Maus angezeigt werden sollen, in einer Imagevariablen geladen werden.

Das Laden erfolgt irgendwo auf der Seite. Die eine Variable soll PicOhneMaus heißen und die andere PicMitMaus. Welche für was ist, darf sich der Leser aussuchen. 

<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- //
function ImgFromFile(img)
{
  var a=new Image();
  a.src=img;
  return a;
}

PicOhneMaus=ImgFromFile("../unix/gurucover.gif");
PicMitMaus=ImgFromFile("../unix/gurubest.gif");
// -->
</SCRIPT>
Die Funktion ImgFromFile erzeugt eine Variable vom Typ Image und weist ihrer Quelle (src) den Dateinamen zu, der der Funktion als Parameter übergeben wird. Direkt darunter ist die Vorbesetzung der beiden Variablen. 

<a 
  href="http://www.galileocomputing.de/katalog/buecher/titel/gp/GPP-unixguru/titelID-769" 
  language="JavaScript"
  OnMouseOver="document['bookPic'].src=PicMitMaus.src"
  OnMouseOut="document['bookPic'].src=PicOhneMaus.src">
<img src="../unix/gurucover.gif" width=118 height=167 border=0 alt="Guru-Buch" name="bookPic">
</a>

In den Ereignissen für OnMouseOver und OnMouseOut wird nun einfach die Quelle der Imagevariablen verwendet. Und siehe da: es funktioniert:

Guru-Buch

Das Buch auf der linken Seite hat zwar leider gar nichts mit Javascript zu tun, lohnt sich aber sicher für jeden, der mit UNIX zu tun hat oder haben wird. Das wichtigste in Auszügen finden Sie aber auch auf diesen Seiten.

Homepage (C) Copyright 2002 Arnold Willemer