andrea6767: Grafik als Cursor in Firefox

Beitrag lesen

SELF-Forum

Grafik als Cursor in Firefox

andrea6767
– Informationen zu den Bewertungsregeln

Hallo!

Zuerst: es gibt bereits einen Forumseintrag zu diesem Thema: eigener Cursor. Ich habe auch die dort aufgeführten Tipps befolgt. Leider besteht mein Problem weiterhin:

Im Safari funktioniert das Ändern des Cursors in eine eigene Grafik wunderbar - nur leider nicht im Firefox (Mozilla/5.0 (Macintosh; U; Intel Mac OS X; de; rv:1.8.1.17) Gecko/20080829 Firefox/2.0.0.17).

Ich wäre für jede Hilfe sehr dankbar. :-)

Grüße von Andrea

P.S.: hier noch mein Script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
<style type="text/css">
~~~~~~css
  
body {  
 background-color:#999;  
 color:#066;  
 font-family:Geneva, Arial, Helvetica, sans-serif;  
 font-size:14px;  
 width:640px;  
}  
  
h1, h2, h3 { text-align:center; font-weight:normal; }  
  
fieldset {  
 margin:1em; padding:1em; text-align:center;  
}  
  
.buttonUp {  
 background-color:#999;  
 background-image:url(../../Bilder/buttons/buttonUp.png);  
 background-repeat:no-repeat;  
 width:100px;  
 height:20px;  
 outline:none;  
 border:0;  
 cursor:pointer;  
 margin-right:1em;  
 padding-bottom:0.4em;  
}  
  
.buttonOver {  
 background-color:#999;  
 background-image:url(../../Bilder/buttons/buttonOver.png);  
 background-repeat:no-repeat;  
 width:100px;  
 height:20px;  
 outline:none;  
 border:0;  
 cursor:pointer;  
 margin-right:1em;  
 padding-bottom:0.4em;  
 color:#FFFFCC;  
}  
  
.buttonDown {  
 background-color:#999;  
 background-image:url(../../Bilder/buttons/buttonDown.png);  
 background-repeat:no-repeat;  
 width:100px;  
 height:20px;  
 outline:none;  
 border:0;  
 cursor:pointer;  
 margin-right:1em;  
 padding-bottom:0.4em;  
 color:#FFFFCC;  
}  
  
.mittigerText {  
 text-align:center;  
}  
  
#mausform {  
 width:500px;  
 height:300px;  
 margin:auto;  
 margin-top:50px;  
}  
  
.maus1 {  
 cursor:url("../../Bilder/mauszeiger/maus_1.png"), w-resize;  
}  
  
.maus2 {  
 cursor:url("../../Bilder/mauszeiger/maus_2.png"), e-resize;  
}

  
</style>  
<script type="text/javascript">
~~~~~~javascript
  
 function init() {  
  btn = window.document.getElementById('mauszeiger');  
 }  
  
 function maus(nr) {  
  //<![CDATA[  
  // mozilla requires CDATA tags for this script,  
  btn.className = 'maus'+nr;  
  window.document.getElementById('maus'+nr).className = 'buttonDown';  
  //]]>  
 };

  
</script>  
<script type="text/javascript" src="../scripts/buttons.js"></script>  
<title>2.3.10. Mauszeiger ver&auml;ndern - JavaScript-Beispiele von Andrea</title>  
</head>  
  
<body onload="init();">  
<div id="mauszeiger">  
  
<h1>2.3.10. Das Aussehen des Mauszeigers verändern</h1>  
  
<p class="mittigerText">Klicken Sie die Buttons, um das Aussehen des Mauszeigers zu verändern.</p>  
  
<form action="" method="get" name="mausform" id="mausform">  
  
 <fieldset>  
  
 <input id="maus1" name="maus1" class="buttonUp" onmouseover="buttonOVER(this)" onmousedown="maus(1)" onmouseup="buttonOVER(this)" onmouseout="buttonUP(this)" type="button" value="Spirale" />  
  
 <input id="maus2" name="maus2" class="buttonUp" onmouseover="buttonOVER(this)" onmousedown="maus(2)" onmouseup="buttonOVER(this)" onmouseout="buttonUP(this)" type="button" value="Smiley" />  
  
 </fieldset>  
  
</form>  
  
</div>  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln