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)
    749 mal gelesen.

    11 Kommentare

    Leave a comment »

    Seiten:

    1. Comment von: Häussler
    30. May 2006: 19:23

    Gutes Scipt,

    einwenig mehr Dokumentation oder ein Anwendungsbeispiel tut aber Not..

    Dennoch, Hut ab und Danke für dieses Script.

    2. Comment von: Häussler
    30. May 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. Comment von: Struppi
    30. May 2006: 20:41

    Sorry, jetzt geht’s wieder.

    4. Comment von: Häussler
    31. May 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. Comment von: Probleme mit Mouseover - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
    24. January 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. Comment von: Hilfe bei Oncklick Funktion - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
    15. February 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. Comment von: Weise
    16. February 2007: 13:08

    Geht das auch irgendwie mit einem Hintergrundbild einer Tabelle

    8. Comment von: Struppi
    16. February 2007: 15:25

    irgendwie bestimmt.

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

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

    10. Comment von: Niko
    9. May 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. Comment von: Karl
    2. October 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

    Leave a comment

    Name (required)
    Mail (wird nicht angezeigt) (required)
    Website

    Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful