web-dev-qa-db-fra.com

Changer le pointeur de la souris en utilisant JavaScript

Je voulais utiliser un script pour changer le pointeur de la souris sur mon site Web en utilisant JavaScript. C'est mieux fait par CSS, mais mon exigence est d'un script qui peut être distribué à de nombreuses personnes à intégrer dans la section principale de leurs sites Web. Grâce à CSS, cela peut être manipulé par

html
{
cursor: *cursorurl*
}

Comment faire de même en JavaScript?

javascriptcursorcustom-cursor
31
Cipher

Javascript est assez bon pour manipuler le CSS.

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

ou avec jquery:

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

Firefox ne fonctionnera pas sauf si vous spécifiez un curseur par défaut après celui imagé!

autres mots clés du curseur

Souvenez-vous également que IE6 ne prend en charge que les curseurs . Cur et .ani .

Si le curseur ne change pas: Si vous déplacez l'élément sous le curseur par rapport à la position du curseur (par exemple en faisant glisser l'élément), vous devez forcer un redessiner sur l'élément:

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

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>
38
Gordon Gustafson
document.body.style.cursor = 'cursorurl';
13
Wally Atkins

Regardez cette page: http://www.webcodingtech.com/javascript/change-cursor.php . On dirait que vous pouvez accéder au curseur hors style. Cette page montre que cela se fait avec la page entière, mais je suis sûr qu'un élément enfant fonctionnerait tout aussi bien.

document.body.style.cursor = 'wait';
8
Brian Ball