CSS – Curseurs
Le le curseur propriété de CSS vous permet de spécifier le type de curseur qui doit être affiché à l’utilisateur.
Une bonne utilisation de cette propriété consiste à utiliser des images pour les boutons d’envoi sur les formulaires. Par défaut, lorsqu’un curseur survole un lien, le curseur se transforme d’un pointeur en une main. Cependant, cela ne change pas le formulaire d’un bouton d’envoi sur un formulaire. Par conséquent, chaque fois que quelqu’un survole une image qui est un bouton d’envoi, cela fournit un indice visuel que l’image est cliquable.
Le tableau suivant montre les valeurs possibles pour la propriété du curseur –
| Sr.No. | Valeur et description |
|---|---|
| 1 |
auto La forme du curseur dépend de la zone de contexte sur laquelle il se trouve. Par exemple un I sur du texte, une main sur un lien, etc… |
| 2 |
réticule Un réticule ou un signe plus |
| 3 |
défaut Une flèche |
| 4 |
aiguille Une main pointée (dans IE 4 cette valeur est la main) |
| 5 |
déplacer Le je barre |
| 6 |
e-redimensionner Le curseur indique qu’un bord d’une boîte doit être déplacé vers la droite (est) |
| 7 |
redimensionner Le curseur indique qu’un bord d’une case doit être déplacé vers le haut et vers la droite (nord/est) |
| 8 |
nw-redimensionner Le curseur indique qu’un bord d’une case doit être déplacé vers le haut et vers la gauche (nord/ouest) |
| 9 |
n-redimensionner Le curseur indique qu’un bord d’une boîte doit être déplacé vers le haut (nord) |
| dix |
se redimensionner Le curseur indique qu’un bord d’une case doit être déplacé vers le bas et vers la droite (sud/est) |
| 11 |
sw-redimensionner Le curseur indique qu’un bord d’une case doit être déplacé vers le bas et vers la gauche (sud/ouest) |
| 12 |
s-redimensionner Le curseur indique qu’un bord d’une boîte doit être déplacé vers le bas (sud) |
| 13 |
w-redimensionner Le curseur indique qu’un bord d’une boîte doit être déplacé vers la gauche (ouest) |
| 14 |
texte Le je barre |
| 15 |
attendez Un sablier |
| 16 |
aider Un point d’interrogation ou un ballon, idéal pour une utilisation sur les boutons d’aide |
| 17 |
La source d’un fichier image de curseur |
NOTE − Vous devriez essayer d’utiliser uniquement ces valeurs pour ajouter des informations utiles aux utilisateurs, et à certains endroits, ils s’attendraient à voir ce curseur. Par exemple, l’utilisation du réticule lorsque quelqu’un survole un lien peut semer la confusion chez les visiteurs.
Voici un exemple −
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>
Cela produira le résultat suivant –
#CSS #Curseurs