Javascript Girl
  1. Javascript Girl
  3. Comment modifier le curseur de la souris sur une image?
Intereting Posts
XHR pour charger la vidéo Throw Error ('msg') vs throw new Error ('msg') Ionic 2 Impossible de résoudre tous les paramètres pour InAppBrowser Mode correct pour implémenter jQuery avec require.js Require jS jQuery différent Panneau coulissant mobile JQuery avec menu imbriqué / menu multi-niveaux Javascript javascript équivalent jquery click ()? Quelle est la meilleure façon de mettre en œuvre une fonction de sommeil JavaScript? Compter les occurrences / fréquence des éléments du tableau Rasteriser un SVG dans le document en toile Obtenez la date de Javascript validée en 2011-04-01 Comment s'inscrire pour des événements de changement de valeur sur <input type = date> sur iOS Comment puis-je récupérer tout le texte dans un DOM HTML mais exclure les balises SCRIPT et STYLE? Dumping Source Code dans un fichier local utilisant CasperJS Filtre d'agrégation après $ lookup

Comment modifier le curseur de la souris sur une image?

J'ai vu des exemples où vous pouvez le changer pour présélectionner des images que votre système d'exploitation possède; Exemple: 

$('body').css('cursor', 'wait');

Mais qu'en est-il de mon propre /img/my_image.png?

Merci pour toute aide.

Vous pouvez, en spécifiant une URL dans CSS: 

 div { cursor:url(smiley.gif),url(myBall.cur),auto; }

Voir http://www.w3schools.com/cssref/pr_class_cursor.asp

Je ne liaisons pas habituellement avec des articles externes, mais celui-ci couvre vos besoins. J'ai copié les éléments pertinents ici pour la persistance. 

 #dragMe { cursor: url('../cursors/customMoveCursor.cur'), /* Modern browsers */ url('cursors/customMoveCursor.cur'), /* Internet Explorer */ move; /* Older browsers */ }

Crédit: http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/

N'oubliez pas de considérer l'accessibilité lors de la création de vos curseurs personnalisés! À votre santé 🙂

La manière Jquery de définir un curseur personnalisé (ou le curseur par défaut comme un repli): 

 $('selector').css({'cursor': 'url(/cursors/customMoveCursor.cur), default'});