Privates • Webdesign • Linux

• PHP- & Javascripts
• Einleitung
• Einbau der Javascripts
• Downloads
• PHP
  • MSE Image Gallery
  • ewToolbox Free Edition
• Javascripts
  • Geburtstags-Script
  • Pulldown-Navi
  • Content-Menü
  • Hover Effekt
  • Image Preloader
  • Ticker-Laufband
• Cobol
  • Adressverwaltung
  • Ascii-Tabelle
• Sonstiges
  • KDE Servicemenü
  • Erweiterung für Quanta+ "Externe Vorschau mit IE"

Hover-Effekt für Bilder

Dokumentation

Features:

Dieses Script ermöglicht Buttons mit hover-Effekt und blendet einen Kommentar in die Statuszeile ein. (browserabhängig)

Benutzung:

Lesen Sie zuerst "Hilfe/Kontakt -> Howto's -> Javascripts einbauen". Nun ein Beispiel (aus der SteiniOnline Startseite index2.htm):

<a href="./classix/index.htm" 
onMouseOver="hoover('pics/button_classix_highlighted.gif',
'bild11','Die ersten STO-Versionen.')" 
onMouseOut="hoover('pics/button_classix.gif','bild11','')">
<img src="pics/button_classix.gif" name="bild11" 
alt="Classix" border="0" align="center">
</a>

Im o.g. Beispiel wird eine Grafik (button_classix.gif; HTML-Name: bild11) als Link definiert. Das Augenmerk sollten Sie auf die beiden Event-Handler onMouseOver und onMouseOut legen. Durch diese wird die Funktion hoover() wenn die Maus auf das Bild bewegt wird bzw. wieder den Bildbereich verläßt, mit verschiedenen Parametern aufgerufen. Es existiert noch eine zweites Bild button_classix_highlighted.gif. Dieses soll erscheinen, wenn man die Maus über das erste Bild bewegt. Sie könne die Bilder natürlich nennen, wie Sie wollen.
Folgende Parameter kennt die funktion:

hoover('Grafik-URL','HTML-Name der ersten Grafik','Kommentar')

Als Erstes wird mit dem a-Tag ein Link definiert. Mit dem onMouseOver Event-Handler wird das Skript aufgerufen, die zweite Grafik, der HTML-NAme der ersten Grafik und der Kommentar für die Statuszeile übergeben. Bei onMouseOut wird wiederum die URL der ersten Grafik übergeben und deren HTML-Name. Der Parameter für den Statuszeilentext beleibt leer.

So wird jeder grafische Link definiert. Das Bild eines jeden Links muss dabei einen anderen HTML-Namen zugewiesen bekommen. Damit der hover-Effekt flüssig funktioniert, empfiehlt sich zusätzlich der Einsatz von preload.js, um das zweite Bild bereits im Voraus in den Speicher des Browsers zu laden.
Um die Ladezeiten nicht zu lang werden zu lassen, empfehle ich den Einsatz von Bildern mit nicht mehr als 256 Farben (8 bit Farbtiefe). Noch weniger ist natürlich noch besser :-)