nicht angemeldet
Mauszeiger verändern
Hallo zusammen,
ich hänge mal wieder... :-(
Ich möchte meinen Mauszeiger verändern, wenn ich auf ein Objekt klicke. Lasse ich die Maustaste los, soll er wieder normal werden. Es schien mir ganz einfach diese Aufgabe zu lösen. Doch es funktioniert nicht immer... Ich hänge unten mal meinen Quellcode an. Vielleicht kann mir ja jemand einen Tip geben. Vielen Dank erst mal!
<div id="div" onmousedown="this.style.cursor='url(docs.ico)'" onmouseup="this.style.cursor='auto'" style="border:none; background-color:#EEEEFF; position:absolute;
top:20px; left:2px; height=200px; width:360px;"><a
href="test.htm" title="Termin">Termin</a></div>
cu sandra
-
Hi,
ich hänge mal wieder... :-(
Ich möchte meinen Mauszeiger verändern, wenn ich auf ein Objekt klicke. Lasse ich die Maustaste los, soll er wieder normal werden. Es schien mir ganz einfach diese Aufgabe zu lösen. Doch es funktioniert nicht immer... Ich hänge unten mal meinen Quellcode an. Vielleicht kann mir ja jemand einen Tip geben. Vielen Dank erst mal!<div id="div" onmousedown="this.style.cursor='url(docs.ico)'" onmouseup="this.style.cursor='auto'" style="border:none; background-color:#EEEEFF; position:absolute;
top:20px; left:2px; height=200px; width:360px;"><a
href="test.htm" title="Termin">Termin</a></div>Kurz und bündig :
1. 'url(docs.ico)' -> url('docs.ico')
2. url(uri) : Internet Explorer 6 and later. Cursor is defined by the author, using a custom Uniform Resource Identifier (URI), such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types.
hth
benno-
<div id="div" onmousedown="this.style.cursor='url(docs.ico)'" onmouseup="this.style.cursor='auto'" style="border:none; background-color:#EEEEFF; position:absolute;
top:20px; left:2px; height=200px; width:360px;"><a
href="test.htm" title="Termin">Termin</a></div>Kurz und bündig :
- 'url(docs.ico)' -> url('docs.ico')
- url(uri) : Internet Explorer 6 and later. Cursor is defined by the author, using a custom Uniform Resource Identifier (URI), such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types.
Hi benno,
vielen Dank erst mal für Deine Antwort.
Soviel ist sicher, um url(..) müssen auf jeden Fall Anführungszeichen oder Hochkommata gesetzt werden, sonst kommt es zu fehler. Wie auch immer... Weiter zum Problem:
Ich hatte in selfhtml gelesen, dass es auch mit GIF oder JPG gehen soll, was es aber nicht tut, und an anderer Stelle eben, dass neben CUR und ANI auch ICO funktioniert. Allerdings ändert das auch nichts an meinem Problem. Denn sowohl das ICO wurde beim ersten OnMOUSEDOWN dargestellt, genauso wie mein CUR. Nur DANN gibt es Probleme:1. Entweder der Mauszeiger verändert sich ohne Mausklick auf das Objekt (also eigentlich schon beim ONMOUSEOVER) in den entsprechenden Cursor und erst nach einem Click stimmt wieder alles
oder
2. der mauszeiger findet beim zweiten ONMOUSEDOWN auf meinem Objekt die angegebene Datei nicht und lässt den Mauszeiger als üblichen Pfeil stehen...
Kannst Du damit was anfangen?
Anmerkung: Gebe ich dem Objekt im style schon cursor:url(..); mit, was ja bedeutet, dass sich der Mauszeiger immer ändern soll, wenn er sich über dem Objekt befindet, macht alles gar keine Probleme...:-(
Wo mache ich nur den Fehler???
cu
sandraMein Quellcode mit den 'Fehlern':
<script type="text/javascript">
function cursor(){
document.getElementById("div").style.cursor="url('DRAGFOLD.CUR')";
}
function cursor2(){
document.getElementById("div").style.cursor="auto";
}
</script>
</HEAD>
<BODY><div id="div" onmousedown="cursor();" onmouseup="cursor2();" style=" border:none; background-color:#EEEEFF; position:absolute;
top:20px; left:2px; height=200px; width:360px;"><a
href="DayCalendar.htm" title="Termin">Termin</a></div></BODY>
Und so gibt's keine Probleme:
<div id="div" style=" cursor:url('DRAGFOLD.CUR'); border:none; background-color:#EEEEFF; position:absolute;
top:20px; left:2px; height=200px; width:360px;"><a
href="DayCalendar.htm" title="Termin">Termin</a></div>DANKE!
-
Hallo,
Ich hatte in selfhtml gelesen, dass es auch mit GIF oder JPG gehen soll, was es aber nicht tut, und an anderer Stelle eben, dass neben CUR und ANI auch ICO funktioniert.
Das steht zwar so in SelfHTML, ich kann das aber nicht nachvollziehen. Die CSS2 Specs hab ich mal kurz überflogen und da wird keine Typenbedingung genannt (http://www.w3.org/TR/REC-CSS2/ui.html#cursor-props). Wobei imho als Cursor-Files nur diejenigen in Betracht kommen sollten, welche heute schon als solche fungieren.
Aber es steht auch in SelfHTML, dass "Netscape 6.x und Internet Explorer 5.x interpretieren die Angabe url([Datei]) nicht.". Soviel dazu.- Entweder der Mauszeiger verändert sich ohne Mausklick auf das Objekt (also eigentlich schon beim ONMOUSEOVER) in den entsprechenden Cursor und erst nach einem Click stimmt wieder alles
oder
- der mauszeiger findet beim zweiten ONMOUSEDOWN auf meinem Objekt die angegebene Datei nicht und lässt den Mauszeiger als üblichen Pfeil stehen...
Na klar, denn der "Maus-Bereich" des Div's ist so groß wie das Div selbst. Es wird beim Mousedown im Div ein Event erzeugt (cursor = irgendwas). Jetzt verläßt Du den Bereich mit gedrückter Maustaste, das "Div" empfängt dann nicht mehr das Event onmouseup. Es hat aber immer noch den definierten Cursor. Kommst Du nun mit der Maus wieder in den Div-Bereich, so greift der aktuell (onmousedown) gesetzte Cursor. Willst Du das Event verfolgen, so müßtest Du die Mouseevents "capturen" (Capture und Release). Wie das geht in einem HTML-Dokument geht? Keine Ahnung!
Was solltest Du tun:
1. Setze bei einem onmousedown den Cursor
2. Setze beim verlassen des Mauszeugers aus dem Div den Cursor zurück
3. Setze bei einem onmouseup den Cursor zurück
4. Achte auf die Unterstützung durch die Browser (CSS2)Workaraound :
<html>
<head>
<script type="text/javascript">
<!--
function setCursor(obj, style)
{
try
{
obj.style.cursor = style;
}
catch (error)
{
}
}
//-->
</script>
</head>
<body><div
onmousedown="setCursor(this, 'http://irgendwo/mycursor.ico');"
onmouseout="setCursor(this, 'auto');"
onmouseup="setCursor(this, 'auto');"
style="border:none;background-color:#EEEEFF;position:absolute;top:20px; left:2px; height=200px; width:360px;"
>
<a href="DayCalendar.htm" title="Termin">Termin</a>
</div></body>
</html>
<gruß
benno-
Super, jetzt funktioniert doch glatt alles so, wie ich es mir vorgestellt habe. :-)
Vielen Dank für Deine Tips.
cu
Sandra
-