Mouseover Skript
Du suchst ein einfaches Mouseover Skript?
Eines:
- wo du kein Javascript können musst?
- wo du deinen HTML Code nicht bearbeiten musst?
- das sich den Zustand des angeklickten Buttons merkt?
- das sich auch einen Button beim drücken der Maustaste anzeigt?
Hier ist es!
Dies ist ein flexibles Mouseover Javascript. Mit dem alle Mousevents (mouseover, mouseout, click und mousedown) mit Hilfe einer Grafik angezeigt werden können. Und das ohne auch nur eine einzige Zeile Javascript im Quellcode einbinden zu müssen!
Das Skript ist sowohl ein einfaches mouseover Script mit 2 Zuständen. Kann aber auch ohne Probleme jederzeit auf alle anderen Mouseevents erweitert werden.
Es muss lediglich den Buttongrafiken eine Klasse zugewiesen werden. Per Default heißt diese Klasse button (kann im Skript modifiziert werden).
Das Skript intialisiert sich nach dem laden der Seite automatisch und durchsucht dann die HTML Seite nach den gewünschten Buttons und stellt, je nachdem welche Grafiken vorhanden sind, die enstprechenden Events zu Verfügung.
Folgende Dinge müssen beachtet werden
- Die Buttongrafiken erhalten die CSS Klasse "button"
- Die Rollover- und Klickgrafiken liegen im gleichen Verzeichniss, wie die ursprüngliche Grafik
- Die Rollover- und Klickgrafiken müssen den gleichen Dateinamen wie die ursprüngliche Grafik haben, plus einer Endung für den jeweiligen Event (s.u).
Anwendung
So sieht der minimale Code für eine Grafik aus:
<html> <head> <!-- Die Bibliothek im Header einbinden --> <script type="text/javascript" src="mouse_over_2.js"></script> </head><body> <a href="link.htm"><img src="link.gif" class="button"></a> </body></html>
Folgende Dateien können dann im gleichen Ordner, wie die Orginalbilddatei link.gif
vorhanden sein:
- mouseout: link.gif Der Ausgangszustand
- mouseover: link_over.gif
- click: link_stay.gif
- mousedown: link_down.gif
Optionen
Im Skript gib es einen Abschnitt Optionen. Die dortigen Variabeln haben folgende Bedeutung:
var className = 'button'; // Name der Klasse var ext = '.gif'; // Das ist der Dateityp der Grafiken (kann auch z.b. .jpg oder .png sein) var over = '_over'; // Die Endung die hinter dem Dateinamen der mouseover Grafik steht var stay = '_stay'; // Die Endung die hinter dem Dateinamen der onclick Grafik steht var down = '_down'; // Die Endung die hinter dem Dateinamen der mousdown Grafik steht
Das Skript sucht automatisch nach den Dateien in dem Verzeichnis, in dem
die Orginaldatei ist und zeigt diese an, wenn der dazugehörige Event eintritt.
Sind die Dateien nicht vorhanden, wird auf den Event nicht reagiert.
Beispiel
Ein Beispiel mit 4 Zuständen (mouseover, mouseout, mousedown und click):
Ein Beispiel mit 3 Zuständen (mouseover, mouseout und click):
Ein Beispiel mit 2 Zuständen (mouseover und mouseout):
Das ist kein Button, bzw. existieren keine Bilder, die einen Mausevent anzeigen könnten.
Der dazugehörige Quelltext sieht so aus:
<img src="button_alle.gif" class="button" alt=""> Ein Beispiel mit 4 Zuständen (mouseover, mouseout, mousedown und click):<br> <img src="button_click.gif" class="button" alt=""> Ein Beispiel mit 3 Zuständen (mouseover, mouseout und click):<br> <img src="button_over.gif" class="button" alt=""> Ein Beispiel mit 2 Zuständen (mouseover und mouseout):<br> <img src="button_kein.gif" class="button" alt=""> Das ist kein Button
Und diese Grafikdateien sind im Ordner images vorhanden:
| Grafik | onmouseout | onmouseover | onmousedown | click |
|---|---|---|---|---|
| alle | button_alle.gif | button_alle_over.gif | button_alle_down.gif | button_alle_stay.gif |
| click | button_click.gif | button_click_over.gif | - | button_click_stay.gif |
| over | button_over.gif | button_over_over.gif | - | - |
| kein | button_kein.gif | - | - | - |
download
Browser
Das Skript ist mit folgenden Browsern getestet:
| Browser | Versionen |
|---|---|
| IE | ab 4.0 |
| Netscape | ab 4.0* |
| Opera | ab 6.0 |
| Mozilla | ja |
*Netscape 4.x zeigt nicht den onclick Event an, da dieser den onclick Event auf Bildern ignoriert, der mousedown Event aber nicht.
3960 mal gelesen.
10 Kommentare Einen Kommentar hinterlassen »
Kommentare
Dienstag 30.Mai 2006: 19:23
Gutes Scipt,
einwenig mehr Dokumentation oder ein Anwendungsbeispiel tut aber Not..
Dennoch, Hut ab und Danke für dieses Script.
Dienstag 30.Mai 2006: 20:21
Hallo nochmal,
ich habe das Script nun einmal - nach Anleitung - eingebaut, es tut jedoch nicht.
grafiken sind im Unterordner buttons3, je eine _sty und eine _over Grafik sind zur Original-Grafik (.png auch im Sccipt angepasst) vorhanden, das script selbst habe ich einmal im root der testseite und dann zum Test - nach Nichtfunktion - nochmal im Ordner mit den Grafiken gespeichert. aufgerufen wird es im head folgendermaßen:
und dann im Body:
Der Script-Debugger für Firefox 1.5.3 zeigt zwar an dass das Script geladen wird, das war es jedoch, keine Down oder stay Funktionen werden ausgeführt. Any Hints?
Gruß
Dienstag 30.Mai 2006: 20:41
Sorry, jetzt geht's wieder.
Mittwoch 31.Mai 2006: 7:44
Hallo Struppi,
ja nun funktioniert es prächtig mit allen Zuständen!
Ein aufrichtiges Danke für dieses Script nochmal.
Übrigens: Was war denn Fehlerhaft? Ich möchte immer dazulernen, bin aber in Javascipt - programmiert auf deinem hohen Niveau - ein Newbee...
Gruß
Mittwoch 24.Januar 2007: 13:59
[...] AW: Probleme mit Mouseover - Heute, 14:59 das ganze geht einfacher und flexibler z.b. so [Javascript ist Toll!] » Mouseover Skript [...]
Donnerstag 15.Februar 2007: 17:33
[...] AW: Hilfe bei Oncklick Funktion - Heute, 18:33 ein schlauer hat gerade in einem anderen Post diesen Link geschickt. Auch das könnte was für dich sein. [Javascript ist Toll!] > Mouseover Skript Gruß wedeto [...]
Freitag 16.Februar 2007: 13:08
Geht das auch irgendwie mit einem Hintergrundbild einer Tabelle
Freitag 16.Februar 2007: 15:25
irgendwie bestimmt.
Mittwoch 16.Juli 2008: 12:37
[...] AW: onmousout gegen onclick auf einen Button - Heute, 12:37 [Javascript ist Toll!] > Mouseover Skript [...]
Sonntag 9.Mai 2010: 19:47
Hallo,
nutze das Script zum zweiten mal und hatte bisher immer folgendes Problem,
unzwar habe ich nur normal, mouse over, und down genutzt, die dateien hiesen dann
xxx_over.gif
xxx_over_over.gif
xxx_over_down.gif
manchmal hat sich das script aufgehangen und nach dem bild xxx_over_stay.gif gesucht, ka ob ich dort was falsch verstanden habe, aber bei mir war es so das es immer wieder ein und das selbe bild in "stay" gesucht hat, da ich das eh nicht nutze konnte ich es bei mir wie folgt lösen:
in der mouseover.js
// Die Events
img.onmouseover = on_mouse_over;
img.onmouseout = on_mouse_out;
img.onmousedown = on_mouse_down;
img.onclick = on_click; <<<<<< durch on_mouse_over; ersetzten,
und schon klappts
vieleicht kann der coder ja nochmal das problem untersuchen ggf mich auf nen fehler den ich mache hinweisen, konnte so aber erstmal das problem lösen vieleicht hilfts ja noch wem
grüsse
Niko
Einen Kommentar hinterlassen