Ändern Sie den Mauszeiger ist ein einfacher Weg, um Jazz bis Ihre Web-Seite mit coolen Spezialeffekten . Mauszeiger Arten können Ihre Web-Seite die Usability , indem Sie Ihren Benutzern zusätzliche visuelle Feedback , vor allem für komplexere scripted Webseiten wie Spiele und interaktive Karten zu verbessern. Javascript kann ändern den Mauszeiger Stil Lassen Sie den Mauszeiger auf das heutige Datum , den Wetterbericht oder fast alles, was Sie sich vorstellen können bezogen werden. Die Technik der Verwendung von Javascript , HTML und CSS zusammen, um dynamische Webseiten zu erstellen ist DHTML (Dynamic HTML) . Basic- Mouse Cursors
Es gibt mehrere Standard- Maus-Cursor , die durch Änderung der Stil einer Seite Dokuments oder Elements Körper verwendet werden kann. Diese Cursor Stile sind standardmäßig Fadenkreuz , Hand, bewegen , Text, wai und Hilfe. Siehe "Die CSS Cursor Property" im Abschnitt Ressourcen für weitere Informationen auf allen grundlegenden Cursor Arten verknüpft. Der Cursor Stil angezeigt , wenn der Mauszeiger über einem Element kann mit CSS werden , wie in diesem Beispiel :
Zusätzlich zu den grundlegenden Cursor können benutzerdefinierte Cursor , indem Sie den Cursor Stil an die Adresse eines Cursors Datei oder Bild verwendet werden, wie in das folgende Beispiel :
Browser-Unterstützung für Cursor Arten und Dateitypen ist inkonsistent. So erwartet Internet Explorer Cursor-Dateien mit . Aktuell oder . Ani Erweiterungen. Firefox mag nicht animierte Cursor ( . Ani -Dateien) und erwartet eine grundlegende Cursor neben Cursor -oder Bilddatei aufgelistet. Für beste Ergebnisse bei Browsern , eine Cursor -Datei (. Aktuell oder . Ani) , eine Bilddatei (PNG, JPEG oder GIF) , und eine basische Cursor-Typ als Fallback . In diesem Beispiel wird eine animierte Cursor für seine erste Wahl , ein einfacher Cursor -Datei als zweite Wahl und das standardmäßige grundlegende Cursor als letzte Fallback -Option. Der Browser wird versuchen jede Option , bis es eine findet es verwenden können .
Die " Offene Cursor Library" im Abschnitt Ressourcen verlinkt bietet kostenfreie , unkomplizierte Mauszeiger Sammlungen Ändern der Cursor -Stil. mit Inline Javascript
Sie können den Mauszeiger mit CSS Javascript. Es gibt mehrere HTML-Attribute im Zusammenhang mit Mausaktionen Sie verwenden, um Javascript ausgeführt wird, wenn die Maus geklickt wird , verschoben oder schwebte über einer Webseite Element kann . Ein paar dieser Attribute sind:
onmouseover : Mauszeiger schwebt über dem elementonmousedown : Maus -Taste pressedonmouseup : Maus -Taste releasedonmouseout : Mauszeiger bewegt sich weg von der elementonclick : Maus -Taste clickedondblclick : Maustaste doppelt angeklickt < p> der "Event -Attribute" Link im Abschnitt Ressourcen für weitere Event-Attribute verwenden, um Sie Javascript Aktionen hinzufügen beziehen kann.
hinzufügen Javascript Aktion zu einem Ereignis , wie eine Maus -over , einfach , indem Sie der Wert des Attributs der Javascript-Code soll ausgeführt. In diesem Beispiel wird der Cursor auf die grundlegenden "help" Cursor geändert werden, wenn die Maus über den Link :
Manchmal muss man mehr als passt bequem in einem Maus- action-Attribut tun wollen. Durch das Schreiben alle Ihre Handlungen in einer Javascript -Funktion können Sie alle Ihre Code am Anfang des HTML-Dokuments zu stopfen , und führen Sie den Cursor Magie, um mit einem einfachen Aufruf der Funktion im Falle Attribut passieren. Diese einfache Javascript Funktion ändert den Cursor Stil für die Web-Seite als Parameter Element in "el" übergeben:
Diese Funktion wird in einem Skript Abschnitt in der Kopfzeile des Dokuments ( zwischen dem
und -Tags ) befindet , oder in einer externen Javascript -Code-Datei in der Kopfzeile des referenzierten Dokument . Um diese Funktion zu verwenden, rufen Sie die Funktion mit dem Schlüsselwort "this" von einem Ereignis -Attribut in einem HTML -Tag. Die Funktion erhält einen Verweis auf die Web-Seite Element mit der Maus Ereignis verknüpft und ändert ihren Cursor Stil . Zum Beispiel , wenn der Mauszeiger bewegt sich über diesem Text verknüpft , wird der Cursor angezeigt durch die Funktion eingestellt werden:
Sie auch ändern können Hauptcursor , die angezeigt wird , wenn der Cursor über die Web-Seite Hintergrund schweben wird . Das Javascript -Funktion, die den Mauszeiger setzt für die Haupt-Webseite Körper auf den Wert in der Funktion als Parameter " CURTYPE " übergeben wurden :
Um diese Funktion zu nutzen rufen Sie die Funktion mit dem Wert " Laden ", " verboten " oder "default" aus einem Ereignis -Attribut in einem HTML -Tag. Zum Beispiel dieses Formular Taste ruft die Funktion , um den Cursor auf " loading" gesetzt, wenn die Schaltfläche geklickt wird :
Es gibt kein Limit, was man mit Javascript Funktionen zu tun. Die folgende Funktion führt einen Countdown , indem die wichtigsten Mauszeiger jede Sekunde auf einen Cursor Bild mit dem aktuellen Zählerstand verbunden. Die setTimeOut Funktion wird dazu führen, die Funktion für eine zweite schlafen , bevor es wieder mit dem aktualisierten Zählung genannt .
