Un curseur personnalisé sur votre site

bg62 · 4 Août 2010

La question est souvent posée de personnaliser le curseur de la souris sur une page web.
Voici un article qui va vous expliquer comment faire, utile pour les sites de jeux par exemple.
La meilleure des méthodes reste bien sur l'utilisation d'une feuille de style CSS pour les propriétés de ce fameux curseur.
Pour le JavaScript, il s'agit, au contraire d'une "propriété", d'installer un script et là vous pouvez en trouver des quantités sur le Net. (google par exemple ... :wink: )
:arrow:
Un exemple à l'aide de JavaScript :

Code:

<html><head>
<script type="text/javascript">
  function sourisOn() { document.images["unimage"].src="image2.gif" }
  function sourisOff() { document.images["unimage"].src="image3.gif"}
</SCRIPT>
</HEAD><BODY>

<A HREF="#" onmouseOver="sourisOn();" onmouseOut="sourisOff();">
<IMG SRC="image1.gif" name="unimage" border=0></A>
</body></html>

:arrow:
Un exmple en CSS placé dans une " div " d'une page de votre site:

Code:

<html><head><title>ma apge avec un autre curseur</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<div style="background-color:#F8F8FF; padding:10pt; border:thin solid black; width:100%; cursor:crosshair;">
<p>Ceci est une DIV avec la mention <b>cursor:crosshair</b>.
Passez avec la souris sur ce passage...</p></div>

<!--etc... la suite de ma page -->
</body></html>

:idea:
L'élément important ici étant le terme " crosshair " car seule quelques termes de ce genre sont reconnus par tous les navigateurs. En voici la liste:

:arrow:
Les curseurs acceptés (en principe) par tous les navigateurs:
* auto : Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
* default : Curseur par défaut du navigateur.
* pointer : Curseur en forme de main avec le doigt déplié.
* text : Curseur d'édition de texte.
* help : Curseur d'aide.
* wait : Curseur d'attente
* progress : Curseur de progression.
* move : Curseur de déplacement.
* crosshair : Curseur en forme de croix.
Curseurs de redimensionnement:
* n-resize : Curseur de redimensionnement bas vers haut.
* s-resize : Curseur de redimensionnement haut vers bas.
* e-resize : Curseur de redimensionnement gauche vers droite.
* w-resize : Curseur de redimensionnement droite vers gauche.
* ne-resize : Curseur de redimensionnement bas-gauche vers haut-droite.
* nw-resize : Curseur de redimensionnement bas-droite vers haut-gauche.
* se-resize : Curseur de redimensionnement haut-gauche vers bas-droite.
* sw-resize : Curseur de redimensionnement haut-droite vers bas-gauche.

D'autres peuvent poser un peu plus de problèmes :
* inherit : Même curseur que la balise parente.
* not-allowed : Curseur en forme de rond barré.
* no-drop : Curseur en forme de main avec le doigt déplié et un rond barré.
* col-resize : Curseur fait de deux traits verticaux avec une flèche de chaque coté.
* row-resize : Curseur fait de deux traits horizontaux avec une flèche de chaque côté.

A vous aussi de faire votre choix, tout en pensant à vos visiteurs, de manière, soit à les surprendre, soit à ne pas trop les désorienter ... car les possibilités d'intégration du code restent cependant fort nombreuses.

source : http://blog.unesourisetmoi.info/?ar...otre-site-javascript-ou-css-pour-une-page-web
Exemples de curseurs différents dans une même page : http://www.unesourisetmoi.info/pages/cursor.php

Toutes les suggestions sont les bienvenues.

Madrileño · 4 Août 2010

Merci c'est intéressant pour certains sites.

anemone-clown · 5 Août 2010

Bonjour,

c'est une reprise de ce qui existe en CSS 2...? Non?

D'ailleurs, je ne suis pas tout à fait d'accord avec cette affirmation : ( ;-) )

La propriété javascript de feuille de style css cursor accepte pour Internet Explorer 6+ et Firefox un curseur personnalisé au format ".cur" ou ".csr".

Les fichiers csr ne sont pas acceptés par IE6 (voir par presque personne d'ailleurs sauf FF) et pour IE6, le format cur est très restrictif. D'un autre coté, pourquoi encore s'embêter beaucoup avec IE6...?

Enfin, avec l'avènement de CSS 2, le JavaScript est devenu assez inutile, et depuis 2.1, il est totalement inutile car on peut proposer un curseur alternatif en CSS au cas où le premier ne serait pas disponible. CSS 3 apporte encore d'autres solutions (embellissements) mais la compatibilité globale n'est pas pour demain.

Exemple :

Code:

.uneclasse {
  cursor:url(unnom.cur),pointer;
}

Si l'url n'est pas dispo, c'est le curseur standard pointer qui sera utilisé. Perso j'utilise dans cette partie de mon www : - http://www.aquaportail.com/fiche-plante-1514-nelumbo-nucifera.html (il faut passer la souris sur l'image de la fleur)
Cette propriété est valide avec tous les navigateurs compatibles CSS 2.1 ;-)

bg62 · 6 Août 2010

ok pour iE6, mais l'exemple que tu donnes (ta page) ça n'a rien à voir puisque cela vient du script de visualisation des images que tu as installé ... et CSS, 2 ,2.1, 3 en général les grands standards sont acceptés
:wink:

anemone-clown · 6 Août 2010

bg62 a dit:
ok pour iE6, mais l'exemple que tu donnes (ta page) ça n'a rien à voir puisque cela vient du script de visualisation des images que tu as installé

Ben non, c'est une simple classe css. Jquery n'a rien à voir dans le changement de forme du curseur. :wink:

bg62 · 6 Août 2010

Code:

le format cur est très restrictif.

là je demande à voir... car de nombreux script récents fonctionnent très bien avec ...
@+

anemone-clown · 6 Août 2010

bg62 a dit:
car de nombreux script récents fonctionnent très bien avec

Tu as tout dit : récents... :mrgreen: Le format cur existe depuis (au plus tard) windows 1 (je développais déjà des applications pour windows 1 en regardant des copains sous X11 Unix :lol: ), il est vieux, vieux. A l'époque, les formats de fichier étaient limités à un faible nombre d'applications. La norme s'est élargie ensuite.

La plupart des formats de fichiers qu'on utilise actuellement ont des normes qui remontent à plus de 15 ans pour beaucoup.