cursore personalizzato

**renzoA45** · 06-08-2004, 11:54

L'esempio delle righe seguenti mi consente di cambiare cursore a piacimento a seconda dell'immagine
su cui clicco.
Ma... se cambio cursore ripetutamente, per imgUNO funziona senza problemi, mentre per imgDUE funziona
solo la prima volta e non le successive. qualcuno mi sa spiegare perchè?

<div id="boxD" onmouseover="style.display='block'">
......
[img]imgUNO.gif[/img]
[img]imgDUE.gif[/img]
...
</div>

**biblo** · 07-08-2004, 19:20

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<STYLE>
<!--
.auto { cursor: auto }
.crosshair { cursor: crosshair }
.default { cursor: default }
.hand { cursor: hand }
.move { cursor: move }
.e-resize { cursor: e-resize }
.ne-resize { cursor: ne-resize }
.nw-resize { cursor: nw-resize }
.n-resize { cursor: n-resize }
.s-resize { cursor: s-resize }
.se-resize { cursor: se-resize }
.sw-resize { cursor: sw-resize }
.w-resize { cursor: w-resize }
.text { cursor: text }
.wait { cursor: wait }
.help { cursor: help }
-->
</style>
</head>

<body>

<FONT CLASS=testo>


<FONT CLASS=testo>I Cascade Style Sheets, in collaborazione con Microsoft Internet Explorer, permettono di utilizzare dei puntatori differenti da quelli di default: la freccetta, la mano per i links, la stanghetta per il testo ecc.

Impostarne uno diverso dal solito e' molto semplice. Per osservare il risultato dei vari codici di esempio, passa con il mouse sopra il testo corrispondente (solo con MsIe):


<BIG>Cursor: auto</BIG>

<FONT CLASS="auto">Utilizzando il valore auto, il browser utilizzera' il cursore di default. In pratica, e' come se non specificassimo niente. Ecco il sorgente:</FONT>

<FONT CLASS=code>
font {cursor: auto}
</FONT>





<BIG>Cursor: crosshair</BIG>

<FONT CLASS="crosshair">Il valore crosshair permette di ottenere una croce, come un mirino, sul testo specificato. Il codice e':</FONT>

<FONT CLASS=code>
font {cursor: crosshair}
</FONT>





<BIG>Cursor: default</BIG>

<FONT CLASS="default">Il valore default impone l'utilizzo della classica freccietta inclinata verso l'alto a destra, anche per i collegamenti ipertestuali e per il testo. Il codice:</FONT>

<FONT CLASS=code>
font {cursor: default}
</FONT>





<BIG>Cursor: hand</BIG>

<FONT CLASS="hand">Impostando hand come valore di cursor, l'oggetto specificato avra' la classica mano dei collegamenti ipertestuali. Il codice e':</FONT>

<FONT CLASS=code>
font {cursor: hand}
</FONT>





<BIG>Cursor: move</BIG>

<FONT CLASS="move">Il cursore move e' quello tipico che assume il puntatore all'atto dello spostamento di una qualsiasi finestra. Il sorgente e':</FONT>

<FONT CLASS=code>
font {cursor: move}
</FONT>





<BIG>Cursor: e-resize</BIG>

<FONT CLASS="e-resize">La dicitura e-resize permette l'utilizzo di una freccietta perfettamente inclinata verso destra. Il codice e':</FONT>

<FONT CLASS=code>
font {cursor: e-resize}
</FONT>





<BIG>Cursor: ne-resize</BIG>

<FONT CLASS="ne-resize">Il valore ne-resize inclina la solita freccietta verso l'angolo alto destro. Simile alla precedente, ma un po' inclinata verso l'alto. Il sorgente da utilizzare e':</FONT>

<FONT CLASS=code>
font {cursor: ne-resize}
</FONT>





<BIG>Cursor: nw-resize</BIG>

<FONT CLASS="nw-resize">Digitando nw-resize come valore di cursor, si otterra' una freccietta inclinata verso l'alto a sinistra. Lo stesso risultato di ottiene impostando default.</FONT>

<FONT CLASS=code>
font {cursor: nw-resize}
</FONT>





<BIG>Cursor: n-resize</BIG>

<FONT CLASS="n-resize">Grazie a n-resize la classica freccietta indica la parte superiore del nostro monitor. Ecco come appare il foglio di stile:</FONT>

<FONT CLASS=code>
font {cursor: n-resize}
</FONT>





<BIG>Cursor: s-resize</BIG>

<FONT CLASS="s-resize">Utilizzando s-resize la nostra freccietta indica la parte inferiore del monitor. Il Cascade Style Sheets da usare e':</FONT>

<FONT CLASS=code>
font {cursor: s-resize}
</FONT>





<BIG>Cursor: se-resize</BIG>

<FONT CLASS="se-resize">La voce se-resize inclina la classica freccietta verso l'angolo basso destro del monitor. Il codice e':</FONT>

<FONT CLASS=code>
font {cursor: se-resize}
</FONT>





<BIG>Cursor: sw-resize</BIG>

<FONT CLASS="sw-resize">L'sw-resize permette di abbassare la freccietta verso l'angolo sinistro basso del nostro monitor. Il sorgente e':</FONT>

<FONT CLASS=code>
font {cursor: sw-resize}
</FONT>





<BIG>Cursor: w-resize</BIG>

<FONT CLASS="w-resize">w-resize sposta la freccietta verso la sinistra del nostro schermo. Il foglio di stile si presenta come qui indicato:</FONT>

<FONT CLASS=code>
font {cursor: w-resize}
</FONT>





<BIG>Cursor: text</BIG>

<FONT CLASS="text">text fa in modo che in qualsiasi punto dello schermo venga utilizzata la stanghetta che il browser usa quando ci si sposta sopra del classico testo.</FONT>

<FONT CLASS=code>
font {cursor: text}
</FONT>





<BIG>Cursor: wait</BIG>

<FONT CLASS="wait">Il wait cambia il cursore in una clessidra. Questo effetto puo' essere utile nelle pagine dinamiche in cui si faccia attendere l'utente. Il codice e':</FONT>

<FONT CLASS=code>
font {cursor: wait}
</FONT>





<BIG>Cursor: help</BIG>

<FONT CLASS="help">Il cursore, utilizzando help viene sostituito da una freccietta con affianco un punto di domanda, tipico delle guide in linea di Microsoft.</FONT>

<FONT CLASS=code>
font {cursor: help}
</FONT>


</FONT>






</body>
</html>

**Jerry Masslo** · 08-08-2004, 12:07

puoi spiegare meglio? così non si capisce, c'è un'immagine con un cursor move e l'altra con un immagine mentre da quanto dici sembra che ne hai molte con l'url

cioè spiega meglio tutto il meccanismo o non si capisce

**renzoA45** · 08-08-2004, 15:59

Ok forse non mi sono spiegato bene.
L'esempio in calce spero sia molto più chiaro. Per farlo funzionare sono ovviamnete necessari anche due files
'penGiallo.cur' e 'penBlu.cur' per i cursori personalizzati.
Francamente è un intoppo che non so come superare.
Grazie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
function cambiaCur() {
document.getElementById("curPers").style.cursor = 'url(penBlu.cur)';
}
</script>
</head>
<body>
<BIG>Cursore personalizzato</BIG>

<div id="curPers">
Ho la necessità di utilizzare cursore in tutto il paragrafo con la possibilità di carbiarlo da dentro il
paragrafo stesso. Questa prova si effettua con quattro cursori diversi: due standard e due personalizzati
utilizzando file esterni .cur che ho chiamato penGiallo.cur e penBlu.cur.

Cliccando su <span onclick="cambiaCur()">CURSORE BLU</SPAN> in tutta l'area viene utilizzato il cursore blu.

Come vedete non ho utilizzato i CSS ma ho agito direttamente sulle proprietà.

Con il <span onclick="curPers.style.cursor='url(penGiallo.cur)' ">CURSORE GIALLO</SPAN> tutta l'area è percorribile dal cursore giallo.

Per questi due cursori personalizzati ho operato in maniera diversa utilizzando anche il DOM, ma il risultato è lo stesso.

Con un cursore standar come <span onclick="curPers.style.cursor='hand'">CURSORE HAND</SPAN> l'utilizzo è ripetibile senza problemi.

Provando in alternativa con un altro cursore come <span onclick="curPers.style.cursor='n-resize'">CURSORE N-RESIZE</span> l'utilizzo è sempre corretto.

Cliccando sui vari cursori il modo casuale vedrete che il cambio cursore, per quelli personalizzati, funziona solo con il primo click, mentre quelli standard
funzionano sempre.

</div>

</body>
</html>

**Jerry Masslo** · 08-08-2004, 18:18

un po' si era capito

però preferivo organizzassi tu la pagina di prova dopo che già bisogna andare a recuperare i file cur

credo che l'url nel cursor funzioni solo su ie, è ho visto il problema e non si risolve nemmeno mettendo due script esterni, in pratica si può cambiare un paio di volte solo

temo dipenda dal browser anche perché diventa un cursor:text
e non c'è molta logica in questo,

hand non è standard, standard è pointer

**renzoA45** · 08-08-2004, 21:45

Ti ringrazio. Mi sembra di capire che non ci sono nemmeno artifizi per aggiare l'ostacolo!!

**Jerry Masslo** · 08-08-2004, 21:59

Originariamente inviato da renzoA45
Ti ringrazio. Mi sembra di capire che non ci sono nemmeno artifizi per aggiare l'ostacolo!!

non ho idea non mi sono mai occupato dei .cur

mi è sempra bastato un cursor

ointer al più

però potresti provare una cosa strana

cioè siccome nell'url del cursor farne una lista in modo che se non ne trova uno passa all'altro si potrebbe vedere come si comporta cambiando col javascript la classe con la lista di .cur

se ne tiene qualcuno poi si può pensare anche di fare una lista dello stesso .cur anche con noni diversi

però mi pare una cosa strampalata tanto più che non vedo il .cur negli altri browser

cioè cambiare classi con che abbiano:

.cursore {cursor:url(freccia.cur), url(freccia2.cur), pointer}

**Jerry Masslo** · 08-08-2004, 23:47

mi è scappato un nuovo ed è partito un 3d

lo ricopio

provato e funziona sempre solo su ie comunque e non c'è bisogno neanche della lista se non la vuoi mettere

<style type="text/css">
.prova {
cursor:url(arrow_il.cur), pointer;
background:red
}
.prova2 {
cursor:url(arrow_l.cur), pointer;
background:green;
}

span {cursor

ointer}
</style>

<script type="text/javascript">
function cambiaCur() {
ciccio=document.getElementsByTagName('p')[0];
ciccio.className="prova";
}
function cambiaCur2() {
ciccio=document.getElementsByTagName('p')[0];
ciccio.className="prova2";
}

</script>

con questi si può camhiare il cursore al primo tag p ad esempio

<div id="curPers"> Cursore personalizzato

Ho la necessità di utilizzare cursore in tutto il paragrafo con la possibilità di carbiarlo da dentro il
paragrafo stesso.
<span onclick="cambiaCur()">CURSORE BLU</span> <span onclick="cambiaCur2()">CURSORE GIALLO</span>
</p>
</div

**renzoA45** · 09-08-2004, 10:05

Mi sembra che anche per te era molto strano che un problema di questo tipo non avesse soluzione!! anch'io ho quindi deciso di fare ulteriori tentativi seguendo peraltro strade molto più semplici: Come puoi notare si tratta un banale problema di sintassi che poi è la stessa dei cursori predefiniti.
errato
<span onclick="curPers.style.cursor='url(penGiallo.cur)' ">
corretto
<span onclick="curPers.style.cursor='penGiallo.cur';">

Però La tua soluzione è molto interessante. La archivio perché sono sicuro che mi tornerà utile in altre circostanze.
Grazie ancora.

**Jerry Masslo** · 09-08-2004, 10:59

ragionare con ie è un'impresa, ora le cose sbagliate si fanno funzionare però una volta sola? da matti.

Discussione: cursore personalizzato

Strumenti discussione

Ricerca discussione

Visualizza

cursore personalizzato

funge

Permessi di invio