Logo www.praast.de

html by praast

Und wieder onmouseover

So oft nachgefragt, daher auch hier nochmal.
Beim überfahren des Links mit der Maus ändert sich das GIF. Auch das aktuelle GIF wird anders angezeigt.
Achtung ! WICHTIG !
Achte auf die Namensvergabe im jeweiligen <img...name="BildX"...>-Tag!

Hier kannst du die Demo probieren.

Vorbereitungen

Das folgende Script musst du im <head> ablegen.

<script language="javascript" type="text/javascript">
<!--
// Original modifiziert
// Dank an Christine: http://www.screenExa.net/
// Bilder vorladen
if (document.images) 
{
   gruenImage = new Image()  
   gruenImage.src = "blcube.gif"  // blaues Gif
   grauImage = new Image()  
   grauImage.src = "wecube.gif"   // graues Gif
   redImage = new Image()  
   redImage.src = "recube.gif"    // Lampe
}

// Statustext anzeigen, Button gruen
function statusein(Bild,text)
{
   window.status = text;
   if (document.images)
   {
      if (Bild.src == grauImage.src)
         Bild.src = gruenImage.src;
   }
}

// Statustext aus, Button grau
function statusaus(Bild)
{
   window.status="";
   if (document.images) 
   {
      if (Bild.src == gruenImage.src)
         Bild.src = grauImage.src;
   }
}

// aktuellen Link kennzeichnen
// dazu alle Buttons grau, dann Button 
// gewaehlter Link == 3.Bild 
function gewaehlt(Bild)
{
   if (document.images)
   {
   // document.images.length entspricht der Anzahl der 
   // auf der Website vorhandenen Bilder!
      for (i=0; i<document.images.length; i++) 
         document.images[i].src = grauImage.src; 
      Bild.src = redImage.src;
   }	  
}
// -->
</script>	

Im <body>-Tag musst du folgendes hinterlegen:
<body onLoad="gewaehlt(document.Bild1)">
Achte darauf, die Bilder ordentlich zu benamsen, jedes Bild muss einen anderen Namen erhalten! Hier ein Beispiel:

<a href="#"
   onmouseover = "statusein(document.Bild1,'Startseite'); 
                  return true" 
   onmouseout = "statusaus(document.Bild1)" 
   onclick = "gewaehlt(document.Bild1)">
   <img src="bild.gif" name="Bild1" alt="" /></a>
<a href="#"
   onmouseover = "statusein(document.Bild2,'Startseite');
                  return true" 
   onmouseout = "statusaus(document.Bild2)" 
   onclick = "gewaehlt(document.Bild2)">
   <img src="bild.gif" name="Bild2" alt="" /></a>
Kontakt/Feedback