StyleAssistant-Homepage

9. Rollover-Effekte mit JavaScript (09.05.1999)

Als Klassiker sind die sogenannten Rollover-Effekte zu bezeichnen. Da diese Effekte in Newsgroups oft nachgefragt werden, stelle ich an dieser Stelle 2 Beispiele zur Verfügung. Hier werden nur die eigentlichen JS-Funktionen und ihr Aufruf gezeigt. Die komplette Funktionalität sollte sich aus dem Code erschließen. Beispiel 9a verwendet den jeweiligen Bild-Index, während Beispiel 9b auf die Bild-Namen zurückgreift. Im Beispiel 9c wurden 2 JS-Rollover-Funktionen so kombiniert, dass bei einer Mausberührung beider Bilder sowohl Bild1 als auch Bild2 durch Bild3 bzw. Bild4 getauscht werden.
Durch den Austausch der Events OnMouseOver durch OnMouseDown bzw. OnMouseOut durch OnMouseUp lassen sich weitere Anwendungen realisieren.

      // JS-Funktion im Beispiel 9a

      function Grafiktausch(BildNr,BildName)
      {
       if (document.images) {
       document.images[BildNr].src = BildName.src;}
      }

      // Aufruf

      <A HREF="http://www.fh-merseburg.de"
      OnMouseOver="Grafiktausch(0,Tausch0)"
      OnMouseOut="Grafiktausch(0,Normal0)">
      <IMG SRC="test_0a.gif" BORDER="0" WIDTH="100" HEIGHT="30"
      ALT="Grafiktausch mit JavaScript"></A>


      // JS-Funktionen in den Beispiel 9b und 9c

      function Over(BildName)
      {
       if (document.images) {
       document[BildName].src = eval(BildName + "_Tausch.src");}
      }

      function Out(BildName)
      {
       if (document.images) {
       document[BildName].src = eval(BildName + "_Normal.src");}
      }

      // Aufruf in 9b

      <A HREF="http://www.fh-merseburg.de" OnMouseOver="Over('Bild0')"
      OnMouseOut="Out('Bild0')"><IMG SRC="test_0a.gif" BORDER="0"
      WIDTH="100" HEIGHT="30" NAME="Bild0"
      ALT="Grafiktausch mit JavaScript"></A>

      // Aufruf in 9c

      <A HREF="test.htm" OnMouseOver="Over('Bild1');Over('Bild2')"
      OnMouseOut="Out('Bild1');Out('Bild2')"><IMG SRC="b1.gif"
      WIDTH="100" HEIGHT="50" BORDER="0"
      ALT="Bild1 --> Bild3" NAME="Bild1"></A>

      <A HREF="test.htm" OnMouseOver="Over('Bild1');Over('Bild2')"
      OnMouseOut="Out('Bild1');Out('Bild2')"><IMG SRC="b2.gif"
      WIDTH="100" HEIGHT="50" BORDER="0"
      ALT="Bild2 --> Bild4" NAME="Bild2"></A>

(9a) So sieht's aus ... (9b) So sieht's aus ... (9c) So sieht's aus ...
Nach oben

Im Beispiel 9d werden Rollover-Scripts auf Image-Maps angewendet. Das Bild besteht aus 3 Teilen: oben, links und rechts. Der Bildertausch findet nur im unteren Bereich (links bzw. rechts) statt. Obwohl immer nur komplette rechteckige Bilder ausgetauscht werden, ändern sich beim Berühren der Image-Map-Links scheinbar nur Teile des jeweiligen Bildes.

      // JS-Funktionen im Beispiel 9d

      var Nr;

      function MapLinks(Nr)
      {
       if (document.images) {
       document.bildlinks.src="links"+Nr+".gif";}
      }

      function MapRechts(Nr)
      {
       if (document.images) {
       document.bildrechts.src="rechts"+Nr+".gif";}
      }

Der Funktionsaufruf erfolgt via OnMouseOver/OnMouseOut im jeweiligen AREA-Tag der Image-Map:

      <AREA SHAPE="POLY" HREF="#" COORDS="98,15, 108,20,
       98,36, 82,54, 56,67, 32,72, 14,74, 17,63, 49,60, 75,43, 98,15"
       OnMouseOver="MapLinks(1)" OnMouseOut="MapLinks(0)"
       OnFocus="blur()" ALT="..." TITLE="...">

(9d) So sieht's aus ...

Schließlich enthält Beispiel 9e eine Funktion, die beim Überfahren eines der vier Bilder ein anderes, am rechten Rand befindliches transparentes Bild überblendet.

(9e) So sieht's aus ...
Nach oben Zur Übersicht

Style

Assistant

Tipps & Tricks – Tipp 9 Zur Übersicht

Tipps & Tricks – Tipp 9
Zur Übersicht