Javascript ist Toll!

24. August 2005 - 16:37

Mouseover Skript

Du suchst ein einfaches Mouseover Skript?
Eines:

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

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:

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:

Grafikonmouseoutonmouseoveronmousedownclick
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

mouse_over.js

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.

ähnliche Artikel

  • Kein ähnlicher Artikel
  • Comments (11)
    883 mal gelesen.

    11 Kommentare

    Leave a comment »

    Seiten:

    1. Kommentar von: Häussler
    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.

    2. Kommentar von: Häussler
    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ß

    3. Kommentar von: Struppi
    30. Mai 2006: 20:41

    Sorry, jetzt geht’s wieder.

    4. Kommentar von: Häussler
    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ß

    5. Kommentar von: Probleme mit Mouseover - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
    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 […]

    6. Kommentar von: Hilfe bei Oncklick Funktion - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
    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 […]

    7. Kommentar von: Weise
    16. Februar 2007: 13:08

    Geht das auch irgendwie mit einem Hintergrundbild einer Tabelle

    8. Kommentar von: Struppi
    16. Februar 2007: 15:25

    irgendwie bestimmt.

    9. Kommentar von: onmousout gegen onclick auf einen Button - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
    16. Juli 2008: 12:37

    […] AW: onmousout gegen onclick auf einen Button – Heute, 12:37 [Javascript ist Toll!] > Mouseover Skript […]

    10. Kommentar von: Niko
    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 :P

    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

    11. Kommentar von: Karl
    2. Oktober 2011: 13:22

    Huhuh haste auch etwas für mich ??

    Ich suche ein fertiges Script,..

    Wenn ich oben über die Menue Leisten gehe,. möchte ich einen z.B. Klick Sound hören,..

    geht das ??

    Kannste sowas mal posten ??

    Am liebsten wäre mir,. wenn man einen Link mit der Maus berührt,. “ KLICK “ das wäre Supi,..

    Habe in der Seite die Möglichkeit Java einzubauen,. mit der CSS & JavaScript Toolbox ( EXTRA FÜR MEINE SEITE KONZIPIERT;.. )

    aber was mus ich in den „EDITOR “ einkopieren,. damit es klappt ??

    gruß KARL

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful