2009-07-31 10 views
7

htmlページ上でマウスカーソルを変更する方法が必要です。私はこれをCSSで行うことができると知っていますが、実行時に変更する必要があります。たとえば、ページ上にボタンがある場合など、カーソルをクリックするとカーソルが特定のカスタムグラフィックに変わります。私はこれを行う最高の(または唯一の?)方法は、JavaScriptを介していると思いますか?私は、これをうまくやって主要なブラウザすべてで動作する方法があることを願っています。 誰かが私を助けてくれたらとても感謝しています。予めhtmlページでのマウスカーソルの変更

答えて

6

返信いただきありがとうございます。 私はついにそれを働かせました。ここで私はそれをやった方法は次のとおりです。

<html> 
<head> 
    <script type="text/javascript"> 
     function changeToCursor1(){ 
      document.body.style.cursor="url('cursor1.ani'),url('cursor1.cur'), default"; 
     } 
     function changeToCursor2(){ 
      document.body.style.cursor="url('cursor2.ani'),url('cursor2.cur'), default"; 
     } 
    </script> 
</head> 

<body> 

    <form> 
     <input type="button" value="Change to cursor 1" onclick="changeToCursor1()" /><br> 
     <input type="button" value="Change to cursor 2" onclick="changeToCursor2()" /> 
    </form> 
</body> 

私はあなた例えば、カーソルの少なくとも2つの選択肢を渡す必要があり、それがFirefoxで動作するように取得することが判明cursor = "url( 'cursor1.cur')、default" それ以外の場合は動作しません。また、Firefoxではアニカイザーでは機能しません。だから私はアニメの後にカールを入れたのです。 aniはIEのFirefoxに表示されます。

アクティブ-X警告が表示されずにユーザーが受け入れる必要がない場合、IEのカーソルを変更することができますか? jQueryのを使用して

-1
//you can set all the normal cursors like this 
someElem.style.cursor = 'progress'; 

特別なカーソルは何ですか?多分もっと良いオプションがあります。

-1
// Get the element you want to change the cursor for 
var el = document.getElementById('yourID'); 

// This image url is relative to the page url 
el.style.cursor="url(pathToImage.png)"; 
1

リンクでのみ行うのは簡単です。 がありますが、このようないくつかのCSSを持っている:

a:hover { cursor: crosshair; } #this is when you mouseover the link 
a:active { cursor: wait; } #this is the moment you click it 

ので:アクティブ以外の要素では動作しません、あなたはPrestaulとscunliffeで述べJavascriptを使用することもできます。

1

$('.myButton').click(function(){ 
    $(this).css('cursor', 'url(/url/to/cursor/image)'); 
}); 
関連する問題