Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Mauszeiger, Javascript und Css


Mauszeiger durch anwenden von Css verändern
Mauszeiger im Formular positionieren

Mauszeiger durch anwenden von Css verändern

Wenn Sie mit der Maus über den Link fahren, wird der Maus Zeiger ausgetauscht www.tam-tam.de. Dafür braucht man nicht mal einen JavaScript, das geht mit CSS alleine und sieht so aus.

<html><head><title>mouse cursor</title></head>
<body>

<style type=text/css>
#zeiger
{
cursor:url("js_beispiele/29_mauszeiger/papagei.cur");
}
#trommel
{
cursor:url("js_beispiele/29_mauszeiger/drum.ani");
}
#testomat
{
cursor='wait'
}
#mausi
{
cursor:url("js_beispiele/29_mauszeiger/m_work.ani");
}
body
{cursor: url("js_beispiele/29_mauszeiger/m_work.ani");
}
</style>

<body>
<A href="http://www.tam-tam.de" target=_blank id="trommel">www.tam-tam.de</a>
<A href="http://www.axialis.com" id="zeiger">www.axialis.com</a>
</body>
</html>

Bei Netscape funktionniert das nur mit den Standard Zeigern, siehe unten. Bedauerlich sind an diesem Effekt nun drei Dinge. Erstens gibt es einen "trade off" zwischen User Verwirrung und Unterhaltungswert. Zweitens funktionniert es mit selbst generierten Mauszeigern nur mit dem Internet Explorer und drittens kann man auch keine Gif Animationen, gif/jpeg/png Bilder verwenden. Die Mauszeiger müssen vom Typ cur (bei statistischen Mauszeigern) bzw. vom Typ ani bei animierten Mauszeigern sein. Will man selbige herstellen, braucht man eine geeignete Software, wie z.B. Axialis Ax Cursors (www.axialis.com). Die Mauszeiger, die man selber kreiert, müssen über einen kompletten virtuellen Pfad angesprochen werden.

Lokal sollte es immer funktionnieren, so der gewünschte Mauszeiger in einem Ordner liegt, auf den der (lokale) Webserver zugreifen kann. Anders verhält es sich im Netz, wenn der Apache eingesetzt wird, was ja in 99,9 % der Fällen der Fall ist. In diesem Fall muss der Mime Type beim Apache angemeldet werden.
Wir erklären nun das Verfahren, wenn Sie direkt Zugriff auf den Apache Server haben, was allerdings selten der Fall ist. Im Anschluss daran erklären wir, ein von uns nicht geprüftes Verfahren, dass sie probieren können, wenn Sie keine Zugriff auf den Apache haben. Im Ordner etc/httpd haben Sie eine Textdatei mit dem sinnreichen Namen mime.types. Wenn Sie diese öffnen, sehen Sie etwas in der Art.


# MIME type Extension
application/activemessage
application/andrew-inset
application/applefile
application/atomicmail
application/dca-rft
application/dec-dx
application/mac-binhex40 hqx
application/mac-compactpro cpt
application/macwriteii
application/msword doc
application/news-message-id
application/news-transmission
application/octet-stream bin dms lha lzh exe class
application/oda oda

Hier müssen Sie den gewünschten Mime Type hinzufügen, im Fall des Mauszeigers also diese Zeile.

application/octet-stream ani cur

Wenn Sie webmin verwenden, was wohl keine schlechte Idee ist, dann können Sie es auch direkt über Webmin einstellen (Menuepunkt mime-types)

Wenn Sie keinen Zugriff haben auf die Konfigurationstabellen des Apaches, was wohl der normal Fall ist, dann können Sie es mit dieser Methode versuchen. Generieren Sie eine Textdatei mit dem Namen .htaccess. Nebenbemerkung: Diese Datei können Sie so nicht abspeichern, da windows Dateien ohne Endung nicht kennt und daraus schliesst, dass .htaccess.txt meinen. Sie vermeiden das Anhängen von .txt wenn Sie schreiben

".htaccess". In diese Datei schreiben
Sie nun
AddType
application/octet-stream
.ani .cur

Wenn Gott der Allmächtige Ihnen beisteht, funktionniert es. Wenn nicht hilft beten.

Will man nur einen Standardmauszeiger einsetzen, ist es ein simples CSS, Das so aussieht

<div id="testomat"><font color=blue size=5>Fährt man über diese Schrift, wird der Mauszeiger ausgetauscht</font></div>

Fährt man über diese Schrift, wird der Mauszeiger ausgetauscht

Das Schema ist dann für alle vordefinierten Mauszeiger das gleiche. Css bietet eien reihe von verschiedenen Mauszeigern, möchte man aber, daß ein Fragezeichen erscheint, wenn der entsprechende Link berührt wird, kann man jetzt den Link mit folgendem Stylesheet erstellen:

<a href="#" style="cursor: help;">Link</a>

Wert Kurzbeschreibung Beispiel
all-scroll Scrolling zu allen Seiten  
col-resize Spaltengröße ändern  
crosshair Fadenkreuz
default Standardcursor  
hand Normale Hand
help Fragezeichen
move Bewegen
no-drop Element kann nicht verschoben werden  
not-allowed Verboten
pointer Normaler Zeiger
progress In Arbeit
row-resize Zeilengröße verändern  
text Texteingabe
vertical-text Texteingabe vertikal
wait Warten
e-resize Vergrößern nach Osten hin
ne-resize Vergrößern nach Nord-Osten hin
nw-resize Vergrößern nach Nord-Westen hin
n-resize Vergrößern nach Norden hin
se-resize Vergrößern nach Süd-Osten hin
sw-resize Vergrößern nach Süd-Westen hin
s-resize Vergrößern nach Süden hin
w-resize Vergrößern nach Westen hin

Mauszeiger im Formular positionieren

Stellt man dem Besucher ein Formular zum Ausfüllen zur Verfügung, kann man ihm auch entgegen kommen und den Mauszeiger ins erste Formularfeld positionieren.

Firmenname:  
     
Strasse und Nr.:  
PLZ und Ort:
     

Jetzt nur noch den vollgenden Script in den Headbereich einfügen.

<script>
<!--
function setfocus() {
document.form1.firmenname.focus();
}
// -->
</script>

Aktiviert wird dieses Script im Bodytag mit

<body onload=setfocus()>

vorhergehendes Kapitel