web-dev-qa-db-fra.com

JavaScript Comment changer le curseur de la souris en une image?

J'ai vu des exemples où vous pouvez le changer en images prédéfinies que possède votre système d'exploitation; exemple:

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

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

Merci pour toute aide.

javascriptjqueryhtmlimagemouse
14
JDS

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

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

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

21
malangi

La façon Jquery de définir un curseur personnalisé (ou le curseur par défaut comme solution de rechange):

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

Je ne lie généralement pas d'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é lorsque vous créez vos curseurs personnalisés! À votre santé :)

2
C.S.