<p style="cursor:..."> Contenuto del paragrafo </p>
Possiamo dividere la lista dei cursori disponibili sia in FireFox che in MSIE nei seguenti gruppi:
Cursori di default | Cursori di base | Cursori di testo | Cursori di ridimensionamento | Cursori per tabelle | Cursori personalizzati |
Passando con il mouse sopra le singole voci si visualizza il tipo di cursore corrispondente.
cursor: auto
cursor: default
<p style="cursor: default">cursor: default</p>
cursor: none
SOLO FIREFOX<p style="cursor: none ">cursor: none</p>
cursor: pointer; cursor:hand
<p style="cursor: pointer; cursor:hand">cursor: pointer;cursor:hand</p>
In questo caso i nomi dei cursori sono diversi. pointer è riconosciuto da Mozilla, mentre hand da MSIE.cursor: help
<p style="cursor: help">cursor: help</p>
cursor: progress
<p style="cursor: progress">cursor: progress</p>
cursor: wait
<p style="cursor: wait">cursor: wait</p>
cursor: crosshair
<p style="cursor: crosshair">cursor: crosshair</p>
cursor: text
<p style="cursor: text">cursor: text</p>
cursor: vertical-text
<p style="cursor: vertical-text">cursor: vertical-text</p>
cursor: alias
SOLO FIREFOX<p style="cursor: alias">cursor: alias</p>
cursor: copy;
SOLO FIREFOX<p style="cursor: copy;p">cursor: copy</p>
cursor: move
<p style="cursor: move">cursor: move</p>
cursor: no-drop
<p style="cursor: no-drop">cursor: no-drop</p>
cursor: not-allowed
<p style="cursor: not-allowed">cursor: not-allowed</p>
cursor: e-resize
<p style="cursor: e-resize">cursor: e-resize</p>
cursor: w-resize
<p style="cursor: w-resize">cursor: w-resize</p>
cursor: ew-resize
SOLO FIREFOX<p style="cursor: ew-resize">cursor: ew-resize</p>
cursor: n-resize
<p style="cursor: n-resize">cursor: n-resize</p>
cursor: s-resize
<p style="cursor: s-resize">cursor: s-resize</p>
cursor: ns-resize
SOLO FIREFOX<p style="cursor: ns-resize">cursor: ns-resize</p>
cursor: nw-resize
<p style="cursor: nw-resize">cursor: nw-resize</p>
cursor: se-resize
<p style="cursor: se-resize">cursor: se-resize</p>
cursor: nwse-resize
SOLO FIREFOX<p style="cursor: nwse-resize">cursor: nwse-resize</p>
cursor: ne-resize
<p style="cursor: ne-resize">cursor: ne-resize</p>
cursor: sw-resize
<p style="cursor: sw-resize">cursor: sw-resize</p>
cursor: nesw-resize
SOLO FIREFOX<p style="cursor: nesw-resize">cursor: nesw-resize</p>
cursor: context-menu
SOLO FIREFOX<p style="cursor: context-menu">cursor: context-menu;</p>
cursor: cell
SOLO FIREFOX<p style="cursor: cell">cursor: cell</p>
cursor: col-resize
<p style="cursor: col-resize">cursor: col-resize</p>
cursor: row-resize
<p style="cursor: row-resize">cursor: row-resize</p>
cursor: all-scroll
<p style="cursor: all-scroll">cursor: all-scroll</p>
cursor: url(c1.cur),default"
<p style="cursor: url(c1.cur),default">
Porre in parentesi l'URL completo del cursore personalizzato (estensione .cur) ed aggiungere una virgola seguita da default: in questo modo il cursore personalizzato è visualizzabile anche con Firefox. L'unica differenza è che, mentre con MSIE sono messi in evidenza anche i colori inversi (nel nostro caso il triangolo interno), con Firefox i colori di base sono uguali a quelli inversi, comunque entrambi trasparenti.
©2009 www.webfract.it