Moosburg Online: www.moosburg.org
Dynamische grafische Buttons

Auf den Moosburger Seiten werden sog. dynamische grafische Buttons verwendet, die ihr Aussehen beim "Berühren" mit dem Mauszeiger ändern, indem sie durch andere Grafiken ersetzt werden. Bei dieser Seite sind das der Titelbutton, der sich in ein kleines Logo von Moosburg Online verwandelt, sowie drei Buttons in der Navigationsleiste, die nach oben springen. (Diese mit JavaScript erzeugten Effekte werden vom Netscape Navigator ab Version 3 und vom Microsoft Internet Explorer ab Version 4 angezeigt).

Der Quellcode dieser Seite ist auch auf andere Seiten anwendbar: Die jeweiligen Bildquellen der Buttons können entsprechend umbenannt werden.

Kommentierter Auszug aus dem Quelltext dieser Seite:

 
<HTML>
<HEAD>
...
<SCRIPT LANGUAGE="JavaScript">
 <!--
 self.onerror = null;
 browserName = navigator.appName;
 browserVer = parseInt(navigator.appVersion);
 var version = "0"

 if (browserName == "Netscape" && browserVer >= 3 ||
 browserName == "Microsoft Internet Explorer"
 && browserVer >= 4)
 version = "yes";
Im Head der Seite wird zunächst der Browser des Lesers ermittelt, um Fehlermeldungen zu verhindern. 
if (version == "yes")
  {
   bild1aus = new Image();
   bild1aus.src = "../gif/k-mol2.gif";
   bild1ein = new Image();
   bild1ein.src = "../gif/mollogo2.gif";

   bild2aus = new Image();
   bild2aus.src = "../gif/b-bnw.gif";
   bild2ein = new Image();
   bild2ein.src = "../gif/b-bnw2.gif";

   bild3aus = new Image();
   bild3aus.src = "../gif/b-mol.gif";
   bild3ein = new Image();
   bild3ein.src = "../gif/b-mol2.gif";

   bild4aus = new Image();
   bild4aus.src = "../gif/b-desi3.gif";
   bild4ein = new Image();
   bild4ein.src = "../gif/b-desi4.gif";
  }
Dann müssen für jede dynamische Grafik zwei Grafikobjekte definiert werden: eines für die normale Grafik (bild*aus) und eines für die Grafik, die bei Mausberührung erscheint (bild*ein), wobei jedes Objekt eine eigene Nummer bekommt.

Jedem Grafikobjekt wird eine Bildquelle zugewiesen (*.src).

 
function bildein(imgName)
 {
  if (version == "yes")
   {
    imgOn = eval("bild" + imgName + "ein.src");
    document["bild" + imgName].src = imgOn;
   }
 }

 function bildaus(imgName)
 {
  if (version == "yes")
   {
    imgOff = eval("bild" + imgName + "aus.src");
    document["bild" + imgName].src = imgOff;
   }
 }
  //-->
 </SCRIPT>
</HEAD>
Anschließend werden die Funktionen bildein und bildaus definiert, die den Wechsel der Grafiken bewirken.

Damit ist das Script im Head abgeschlossen.

 
<BODY>
...
<TABLE>
  <TR>
    <TD><A HREF="http://www.weihenstephan.org/index.html"
    onMouseOver="bildein('2')"
    onMouseOut="bildaus('2')">
    <IMG SRC="../gif/b-bnw.gif"
    width=150 height=30 alt="B&uuml;rgernetz
    Weihenstephan" border=0
    name="bild2"></A></TD>

    <TD><A HREF="../index.html"
    onMouseOver="bildein('3')"
    onMouseOut="bildaus('3')">
    <IMG SRC="../gif/b-mol.gif"
    width=150 height=30 alt="Moosburg Online" border=0
    name="bild3"></A></TD>

    <TD><A HREF="../design/index.html"
    onMouseOver="bildein('4')"
    onMouseOut="bildaus('4')">
    <IMG SRC="../gif/b-desi3.gif"
    width=150 height=30 alt="Designzentrum" border=0
    name="bild4"></A></TD>
...
</BODY>
</HTML>
Im Body werden in den Link jeder dynamischen Grafik zwei "Event-Handler" eingebaut:
Einer (onMouseOver) für das Berühren der Grafik mit der Maus, ein zweiter (onMouseOut) für das Verlassen der Grafik mit der Maus.

Dabei werden die oben definierten Funktionen (bildaus bzw. bildein) aufgerufen (in Klammern die Nummer der Grafik).

In der Grafikreferenz steht jeweils der Name der Grafik (name="bild*")
Besten Dank an Klaus Seibold und Bernd Redeker für die Hilfe beim Quelltext!
Bürgernetz Weihenstephan Moosburg Online Designzentrum
Zuletzt bearbeitet am 30.4.2001 von © Werner Schwarz (E-Mail) - Es gilt das Urheberrecht!