spacer.png, 0 kB
spacer.png, 0 kB
Home arrow WEB e HTML arrow css arrow CSS: cambiare lo stile del puntatore
CSS: cambiare lo stile del puntatore PDF Stampa E-mail
Scritto da Administrator   
domenica 24 agosto 2008

Con i CSS č possibile cambiare la grafica del puntatore del mouse, associandola ad un particolare elemento della vostra pagina. Questo sistema risulta una potente innovazione che si puņ ottenere grazie ai fogli di stile: un utilizzo non eccessivo risulta comunque consigliato per non confondere, o peggio ancora irritare, l'utente con un uso eccessivo di questa tecnica soprattutto se poco corrispondente al contenuto.
La tabella qui di seguito mostra i possibili valori da assegnare all'elemento cursor ed i relativi risultati per ogni browser:

IconaAttributoCodiceBrowser
autoBasato sul particolare contestotutti
defaultstyle="cursor: default;"tutti
handstyle="cursor: hand;"IE
pointerstyle="cursor: pointer;"NS6/ IE6
hand & pointerstyle="cursor: pointer; cursor: hand"tutti
crosshairstyle="cursor: crosshair;"tutti
textstyle="cursor: text;"tutti
waitstyle="cursor: wait;"tutti
helpstyle="cursor: help;"tutti
inheritValore dell'elemento parenttutti
movestyle="cursor: move;"tutti
e-resizestyle="cursor: e-resize;"tutti
ne-resizestyle="cursor: ne-resize;"tutti
nw-resizestyle="cursor: nw-resize;"tutti
n-resizestyle="cursor: n-resize;"tutti
se-resize style="cursor: se-resize;" tutti
sw-resize style="cursor: sw-resize;" tutti
s-resize style="cursor: s-resize;" tutti
w-resize style="cursor: w-resize;" tutti
progress style="cursor: progress;" IE6
all-scroll style="cursor: all-scroll;" IE6
col-resize style="cursor: col-resize;" IE6
no-drop style="cursor: no-drop;" IE6
not-allowed style="cursor: not-allowed;" IE6
row-resize style="cursor: row-resize;" IE6
url(uri) style="cursor: url(myc.ico);"
(file .cur e .ani)
IE6
vertical-text style="cursor: vertical-text;" IE6

Esempio utilizzo cursore move ed help:

<div style="cursor: move; width: 600px; height: 50px; background: #ccddff;"></div>
<a href="javascript:alert('Aiuto')" style="cursor: help;">Aiuto</a>

Aiuto
Ultimo aggiornamento ( domenica 24 agosto 2008 )
 
< Prec.
spacer.png, 0 kB
spacer.png, 0 kB
spacer.png, 0 kB