7
votes

Modification du curseur de souris sur une page HTML

J'ai besoin d'un moyen de changer le curseur de la souris sur une page HTML. Je sais que cela peut être fait avec CSS, mais je dois être capable de le changer au moment de l'exécution, comme par exemple, avoir des boutons de la page, et lorsqu'ils ont cliqué, ils changent le curseur sur un graphique personnalisé spécifique. Je pense que le meilleur (ou seulement?) De faire cela est via JavaScript? J'espère qu'il y a un moyen de faire cela bien qui fonctionnera sur tous les grands navigateurs. Je serais très reconnaissant si quelqu'un pouvait m'aider avec ça.

Merci d'avance

javascript css mouse-cursor

0 commentaires

6 Réponses :

3
votes

http://www.javascriptkit.com/dhtmltutors/cssCursors.shtml

Theres un exemple en bas.

0 commentaires

-1
votes

//you can set all the normal cursors like this
someElem.style.cursor = 'progress';
What is the special cursor you want?... maybe there is a better option.

0 commentaires

-1
votes

// 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)";

0 commentaires

1
votes

C'est facile si vous voulez le faire sur des liens uniquement. Là, vous avez des CSS comme ceci:

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

0 commentaires

6
votes

Merci pour les réponses. Je l'ai enfin fini. Voici comment je l'ai fait:

<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>

0 commentaires

1
votes

Utilisation de jQuery: xxx

0 commentaires