Rollover Buttons
    
WWW.WEB-TOOLBOX.NET
  HTMLCode ZURÜCK SITEMAP  

  keine langeweile

Eine grafische Buttonleiste mit MouseOver-Effekt muss nicht langweilig sein. Abhängig vom Seiteninhalt und Farbgebung kann man seinen Phantasie freien Lauf lassen.

Versuchen Sie doch einmal etwas Neues! Zum Beispiel ein Button und ein gekörntes Bild.


  

Bei meinen Beispielen wird mal lediglich ein Beschreibungstext eingeblendet, mal eine gewagte Farbgebung angezeigt. Interessant wäre auch eine Anzeige in schwarz-weiss oder in einem einheitlichen Farbton und bei MouseOver die Anzeige des farbigen Motivs

BEISPIEL für Farbton zu Farbe


   Hier möchte ich Sie zu Experimenten anregen

Variante 1











verwendete MouseOver-Images (GIF-Images transparent):









Variante 2











verwendete MouseOver-Images (Hintergrund eingefärbt wegen gelbem Text):










   Erklärung

Sie benötigen für jeden Verweis 2 verschiedene Buttons gleicher Grösse! (hier also 10 Buttons)

Zur Vereinfachung sind die Dateinamen mit "b-NUMMER.gif" festgelegt.

b1.gif - b5.gif   für die normale Ansicht

b1h.gif - b5h.gif   für die MouseOver-Ansicht.

Damit man den Button (für JavaScript ein Objekt) gezielt ansprechen kann, werden für jede auszutauschende Grafik (jeden Button) Namen vergeben.

Die vergebenen Objektnamen für die Grafiken innerhalb der Links sind mit i01 bis i05 festgelegt.




   im HEAD-Bereich

Zuerst werden die 10 Images bekannt gemacht, bekommen einen eindeutigen Namen und werden vorab geladen. Dann folgt die Funktion zum Austausch bei MouseOver und MouseOut. 

<script type="text/javascript" language="JavaScript">
<!--
i01 = new Image();
i01.src = "b1.gif"; /* Standard-Grafik */
i01h = new Image();
i01h.src = "b1h.gif"; /* Highlight-Grafik */

i02 = new Image();
i02.src = "b2.gif"; /* Standard-Grafik */
i02h = new Image();
i02h.src = "b2h.gif"; /* Highlight-Grafik */

i03 = new Image();
i03.src = "b3.gif"; /* Standard-Grafik */
i03h = new Image();
i03h.src = "b3h.gif"; /* Highlight-Grafik */

i04 = new Image();
i04.src = "b4.gif"; /* Standard-Grafik */
i04h = new Image();
i04h.src = "b4h.gif"; /* Highlight-Grafik */

i05 = new Image();
i05.src = "b5.gif"; /* Standard-Grafik */
i05h = new Image();
i05h.src = "b5h.gif"; /* Highlight-Grafik */

// hier einfach nach Bedarf erweitern mit
// i06 = new ...

function hiLite(imgID,imgObjName) {
// imgID - Name oder Nummer des auszutauschenden Bildes
// imgObjName - Name des Bildes mit dem ausgetauscht wird
document.images[imgID].src = eval(imgObjName + ".src")
}
//-->
</script>



   Links im BODY-Bereich

Bei ONMOUSEOVER bzw. ONMOUSEOUT (Eventhandler) wird die Funktion "hiLite" aufgerufen.
Für die eingefügte Grafik (Button) wird ein Name vergeben. (name="i01")

 Jeder Name darf nur einmal vergeben werden!

Verweis 1

<a href="fenster.htm" target="_blank"
ONMOUSEOVER="hiLite('i01','i01h');
 window.status='Statuszeilentext'; return true"
ONMOUSEOUT="hiLite('i01','i01')">
<img name="i01" src="b1.gif" width="99" height="80" border="0" alt="">
</a>

Verweis 2 
<a href="fenster.htm" target="_blank"
ONMOUSEOVER="hiLite('i02','i02h');
 window.status='Statuszeilentext'; return true"
ONMOUSEOUT="hiLite('i02','i02')">
<img name="i02" src="b2.gif" width="99" height="80" border="0" alt="">
</a>




   Eweiterungen

So können Sie diese Leiste ganz einfach erweitern, indem Sie diese Logik weiterführen. Erweitern Sie auch diese Reihe der Verweise nach Ihrem Bedarf indem Sie die entsprechenden Zahlen ersetzen.


im Head ( 2 neue Images ) 
i07 = new Image();
i07.src = "b7.gif"; /* Standard-Grafik */
i07h = new Image();
i07h.src = "b7h.gif"; /* Highlight-Grafik */


im Body für Verweis 7 ( 6 Änderungen ) 
<a href="fenster.htm" target="_blank"
ONMOUSEOVER="hiLite('i07','i07h');
 window.status='Statuszeilentext'; return true"
ONMOUSEOUT="hiLite('i07','i07')">
<img name="i07" src="b7.gif" width="99" height="80" border="0" alt="">
</a>









NACH OBEN