Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
-83%
Le deal à ne pas rater :
Hub USB LAB.C – Chargeur USB universel 5 portes
4.99 € 29.99 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

Les curseurs de notre souris Empty Les curseurs de notre souris

le Mer 8 Avr 2020 - 10:18

Les curseurs de notre souris


Bonjour à toi !

Aujourd'hui ça sera un tutoriel très très court basé sur les curseurs de notre souris. Mais de quoi parle t-on ? Je parle ici de ce à quoi ressemble notre souris selon l'endroit d'une page web où on se trouve.

Par exemple, par défaut nous avons celui-ci lors de la navigation : Les curseurs de notre souris Mouse-cursor-png-5a3aa616617a62.7995059515137930463993 , celui-ci quand on est dans une zone de texte ou sur du texte : Les curseurs de notre souris Simple-text-insert-marker-type-input-mouse-cursor-vector-id1135476062 et celui-ci quand on passe sur un lien : Les curseurs de notre souris Curseur%20main

Intérêt de changer le curseur

On peut vouloir changer le curseur pour lui ajouter une petite déco, par exemple un point d'interrogation quand on passe sur un infobulle :

Passe sur moi


Mais on peut également complètement changer le curseur et y ajouter une grosse image ou autre chose :

Passe sur moi



Tout est faisable en fait.
Exclamation Attention ici, il ne faut pas oublier les valeurs par défaut. Mettre un pointer comme pour un lien sur quelque chose de non-cliquable peut fortement perturber.
De même, il faut faire attention que le curseur soit pratique, qu'il ne gêne pas la navigation et qu'il permette quand même les sélections : mon second exemple fait parti des choses qu'il vaut mieux éviter de faire Wink

Comment ça marche

Et bien en fait, c'est tout simple : on applique la propriété CSS "cursor" à notre élément. Sur mes exemples du dessus, ma CSS pourrait être :
Code:
p{
cursor:help;
}

Et pour la seconde :
Code:
p{
cursor: url(https://i.servimg.com/u/f86/19/47/12/29/468px-10.png), auto;
}

Un curseur peut être appliqué à toute une page, auquel cas on l'applique sur le body :
Code:
body{
cursor:help;
}

Ou alors aux liens :
Code:
a{
cursor:pointer;
}

Bref, ils s'appliquent à n'importe quel élément : qu'il ait une class, un id, que ça soit une balise, etc...

Différentes valeurs de curseurs

Il y a beaucoup de valeurs possibles pour les curseurs. Tu peux les retrouver juste ici.
Mais pour les plus répandus :
cursor:help; : ajoute un petit point d'interrogation à coté de la souris:
cursor:pointer; : transforme la souris en "main pointeur" comme pour les liens par défaut
cursor: wait; : transforme le curseur en petit rond qui tourne, comme quand une page charge
cursor: text; : transforme le curseur en la petite barre de sélection de texte.
cursor: progress; : ajoute le petit rond d'attente en plus de la souris par défaut

On peut aussi y ajouter une image avec ce code :
cursor: url(URL DE L'IMAGE), auto;




Je le répète, c'est tout de même à utiliser avec modération sur les forums. Il ne faut pas chambouler l'utilisateur par des curseurs excentriques ou qui n'ont rien à voir avec celui de base. De mon coté, je suis toujours perturbée quand je vois une "pointer" qui n'est pas sur quelque chose de cliquable Wink


_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses