CSS - Cursori
La proprietà del cursore dei CSS consente di specificare il tipo di cursore che deve essere visualizzato all'utente.
Un buon utilizzo di questa proprietà consiste nell'usare le immagini per i pulsanti di invio sui moduli. Per impostazione predefinita, quando un cursore passa su un collegamento, il cursore cambia da puntatore a mano. Tuttavia, non cambia il modulo per un pulsante di invio in un modulo. Pertanto, ogni volta che qualcuno passa il mouse su un'immagine che è un pulsante di invio, fornisce un indizio visivo che l'immagine è selezionabile.
La tabella seguente mostra i possibili valori per la proprietà del cursore:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | auto La forma del cursore dipende dall'area di contesto su cui si trova. Ad esempio una I su un testo, una consegna di un collegamento e così via ... |
| 2 | crosshair Un mirino o un segno più |
| 3 | default Una freccia |
| 4 | pointer Una mano che indica (in IE 4 questo valore è mano) |
| 5 | move Il bar |
| 6 | e-resize Il cursore indica che un bordo di una casella deve essere spostato a destra (est) |
| 7 | ne-resize Il cursore indica che un bordo di una casella deve essere spostato verso l'alto e verso destra (nord / est) |
| 8 | nw-resize Il cursore indica che un bordo di una casella deve essere spostato verso l'alto e verso sinistra (nord / ovest) |
| 9 | n-resize Il cursore indica che un bordo di una casella deve essere spostato verso l'alto (nord) |
| 10 | se-resize Il cursore indica che il bordo di una casella deve essere spostato in basso e a destra (sud / est) |
| 11 | sw-resize Il cursore indica che un bordo di una casella deve essere spostato in basso e a sinistra (sud / ovest) |
| 12 | s-resize Il cursore indica che un bordo di una casella deve essere spostato verso il basso (sud) |
| 13 | w-resize Il cursore indica che un bordo di una casella deve essere spostato a sinistra (ovest) |
| 14 | text Il bar |
| 15 | wait Una clessidra |
| 16 | help Un punto interrogativo o un fumetto, ideale per l'uso sui pulsanti di aiuto |
| 17 | <url> L'origine di un file immagine del cursore |
NOTE- Dovresti provare a utilizzare solo questi valori per aggiungere informazioni utili per gli utenti e, in alcuni punti, si aspetterebbero di vedere quel cursore. Ad esempio, l'utilizzo del mirino quando qualcuno passa sopra un collegamento può confondere i visitatori.
Ecco un esempio:
<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>Produrrà il seguente risultato: