un curseur personnalisé pour votre site, JavaScript ou CSS pour une page web

La question est souvent posée de personnaliser le curseur de la souris sur une page web. Les réponses, à l'aide de JavaScript ou de la CSS existent mais il vous faudra faire quand même quelques tests sur les différents navigateurs ...

Pour changer l'apparence du curseur dans une page web, il existe deux méthodes: à l'aide de JavaScript ou à l'aide de la CSS; De nombreux paramètres existent et vous pouvez les tester avant de mettre en ligne pour voir également leur compatibilité actuelle avec les dernières versions des différents navigateurs.

La meilleure des méthodes restant 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.

recherche GOOGLE

Page de démonstration sur le site

Un exemple parmi tant d'autres: (javaScript ou DHTML):

<script type="text/javascript">
function sourisOn() { document.images["unimage"].src="https://longuetraine.fr/image2.gif" }<br / /> function sourisOff() { document.images["unimage"].src="https://longuetraine.fr/image3.gif"}
</script>

<a href="#" onmouseover="sourisOn();" onmouseout="sourisOff();">
<img src="https://longuetraine.fr/image1.gif" name="unimage" border="0" />
</a>

Il faut donner un nom pour pouvoir l'utiliser en tant qu'objet (syntaxe : name = "nom_image"), dans l'exemple : unimage. On le fait dans le Html lorsqu'on place l'image.
Dans document.images["nom_image"].src, il y a le nom du fichier de l'image et son chemin relatif sur le disque (dans l'exemple, le même répertoire).
En y attribuant un autre fichier, on change l'image affichée.
Pour ce faire dans le 1er exemple les évènements onmouseOver (souris dessus) et onmouseOut (souris pas dessus) de la balise ont été utilisées associées à 2 fonctions, créées pour cet usage. Dans le 2ème exemple plus compliqué, c'est la balise et l'évènement onclick qui ont été utilisés.

Autre solution:

Pour afficher un curseur personnalisé autre que le curseur par défaut, il vous suffit d'insérer ceci dans la balise du curseur à modifier (cela peut être dans le BODY, dans un A HREF, dans un FONT, etc...)

style="cursor: votre_curseur"

Vous pouvez aussi donner un style à vos liens de cette façon :
texte

avec les propriétés suivantes:

default            Curseur par défaut
hand            Curseur de lien
help            Curseur d'aide
wait            Curseur de chargement
text            Curseur de texte
crosshair    Précision
move            Bouger
n-resize    Flèche vers le "nord"
s-resize    Flèche vers le "sud"
w-resize    Flèche vers le "ouest"
e-resize    Flèche vers le "est"
nw-resize    Flèche vers le "nord ouest"
se-resize    Flèche vers le "sud est"
ne-resize    Flèche vers le "nord est"
sw-resize    Flèche vers le "sud ouest"

Vous pouvez bien sur faire une recherche pour trouver des scripts actualisés, mais avec tous les problèmes que cela peut engendrer, autant reveneir à notre bonne vieille feuille de style CSS ...

On peut attribuer un curseur personnel à une page.
Il suffit de mettre dans le code CSS à la balise voulue en partant du principe que votre curseur est dans le dossier courant:

cursor: url('votre_curseur_perso.cur'), pointer; (par eexemple ...)

La taille des curseurs ne doit pas excéder 32x32 px. Vous pouvez partir des curseurs d'origine et les modifier, en prenant soin de sauvegarder avant toute manipulation (sous Windows, ils se trouvent dans C:windows....cursors).

Définition de " cursor ":

La propriété javascript de feuille de style css cursor permet de spécifier en javascript la forme du curseur.
Exemple de code :
objetJavasript.style.cursor = "nw-resize";

La propriété javascript de feuille de style cursor css peut prendre la valeur de type String :
- auto, valeur par défaut,
- nw-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche,
- crosshair, curseur en forme de croix fine,
- n-resize, curseur en forme de double petite flèche verticale,
- default, curseur en forme de grosse flèche,
- se-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche,
- pointer, curseur en forme de main avec un doigt déplié,
- sw-resize, curseur en forme de curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,
- move curseur en forme de quatres flèches en croix,
- s-resize, curseur en forme de double petite flèche verticale,
- e-resize, curseur en forme de double petite flèche horizontale,
- w-resize, curseur en forme de double petite flèche horizontale,
- ne-resize, curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,
- text, curseur en forme de sorte de grand I,
- help, curseur en forme de flèche,
- wait, curseur en forme de sablier,
- inherit, curseur en forme de hérite de son parent
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".
- url(moncueseur.cur)

La propriété javascript de feuille de style cursor css peut renvoie la valeur de type String :
- auto, valeur par défaut
(Zone CSS)

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

Si vous ne voulez pas mettre un curseur particulier dans votre site web, ce qui dérange souvent, mais en mettre un dans une page donnée ou a un endroit précis, voici un exemple concret::

ma apge avec un autre curseur    Ceci est une DIV avec la mention cursor:crosshair. Passez avec la souris sur ce passage...

Vouspouvez donc maintenant vous amusez sur votre site ... et si problèmes:

Page de démonstration sur le site

source : CCM

dépannage : CCM webmastering

autre documentation : self HTML

Écrire un commentaire