INDICE

CAMBIARE IL CURSORE DEL MOUSE

Possiamo scegliere fra vari tipi predefiniti di cursore che si attivano quando il mouse passa sopra quasi tutti gli elementi.
In ogni caso, occorre specificare l'elemento, ad esempio un paragrafo, seguito dal seguente codice:

<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.

Cursori di default

cursor: auto

<p style="cursor: auto">cursor: auto</p>

cursor: default

<p style="cursor: default">cursor: default</p>

cursor: none SOLO FIREFOX

<p style="cursor: none ">cursor: none</p>

Torna su

Cursori di base

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.
Usando entrambi i termini si visualizza la manina con entrambi i browser.

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>

Torna su

Cursori di testo

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>

Questi due ultimi codici danno luogo alla stessa immagine per FIREFOX, mentre visualizzano due immagini diverse con MSIE.

Torna su

Cursori di ridimensionamento

Freccia con doppia punta orizzontale

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>

Freccia con doppia punta verticale

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>

Freccia con doppia punta dal basso a destra all'alto a sinistra

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>

Freccia con doppia punta dal basso a sinistra all'alto a destra

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>

Torna su

Cursori per tabelle

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>

Torna su

Cursori Personalizzati

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.

Torna su


©2009 www.webfract.it