JavaScriptを使用してマウスポインタを変更する

JavaScriptを使用して自分のウェブサイト上のマウスポインタを変更するスクリプトを使用したかったのです。これはCSSで行う方が良いですが、自分のウェブサイトの頭の部分に埋め込むために多くの人に配布できるスクリプトが必要です。はCSSを通じ、これはJavaScriptで同じことを行うにはどのようにJavaScriptを使用してマウスポインタを変更する

html 
{ 
cursor: *cursorurl* 
}

によって操作することができますか？

出典

2010-12-30 Cipher

JavaScriptはCSSを操作する上で非常に優れています。

document.body.style.cursor = *cursor-url*; 
//OR 
var elementToChange = document.getElementsByTagName("body")[0]; 
elementToChange.style.cursor = "url('cursor url with protocol'), auto";

やjQueryを使って：

$("html").css("cursor: url('cursor url with protocol'), auto");

あなたが画像化されたものの後、既定のカーソルを指定しない限りFirefoxが動作しません！

other cursor keywords

はまた、IE6のみ.cur and .ani cursorsをサポートしていることを覚えておいてください。

working sample: 

<!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> 
<title>First jQuery-Enabled Page</title> 
<style type="text/css"> 

div { 
    height: 100px; 
    width: 1000px; 
    background-color: red; 
} 

</style> 
<script type="text/javascript" src="jquery-1.3.2.js"></script></head> 
<body> 
<div> 
hello with a fancy cursor! 
</div> 
</body> 
<script type="text/javascript"> 
document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto"; 


</script> 
</html>

出典

2010-12-30 16:22:51

私はこれを試しました

document.body.style.cursor = 'cursorurl';

出典

2010-12-30 16:22:22

私のために働いていないのは、CSSでのみ... –

このページを見て：http://www.webcodingtech.com/javascript/change-cursor.php。あなたはスタイルからカーソルを外すことができるように見えます。このページは、ページ全体で完了したことを示していますが、子要素も同様に機能します。

elementsToChange.style.cursor = "http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur";

出典

2010-12-30 16:23:10

これは、カーソルが実際に移動されたことを前提に動作します。そうでなければ、それは既存のカーソルのままです – s1cart3r

-1

私に知られていない理由のために...

出典

2010-12-30 16:45:10

それは私にとってカーソルを変更していません。ここ - > http://textb.in/39 – Cipher

-2

それとも、次のことを試すことができます：

時々、 target_element.style.property = valueは、私のために働いていないために

document.getElementById("id_of_target_element").setAttribute("style", "cursor:url(path_to_file.cur);")

それは次のようになり@CrazyJugglerDrummer第二の方法に関して

document.body.style.cursor = 'wait';

出典

2013-08-13 16:32:55 apratimankur

JavaScriptを使用してマウスポインタを変更する

答えて

関連する問題