La proprietà "cursore" in fogli di codice CSS (Cascading Style) consente di modificare il modo in cui viene visualizzato il cursore del mouse dell'utente quando si sta puntando ad un elemento nella pagina Web. È possibile specificare i cursori diversi per diversi elementi per aiutare a costruire una interfaccia utente sfumata, oppure è possibile modificare la proprietà del cursore per l'elemento "corpo" per cambiare il cursore per l'intera pagina. JavaScript può essere utilizzato per dichiarare e modificare le proprietà CSS, in modo da poter riassegnare dinamicamente la proprietà "cursore" di vari elementi della pagina.

istruzione

1 Inserire il codice seguente tra i tag "testa" del documento HTML:

<Script type = "text / javascript">

Funzione changeCursorById (ref, corr) {

document.getElementById (ref) .style.cursor = cur;

}

</ Script>

2 Aggiungere il seguente codice al corpo del documento HTML per vedere come funziona la funzione di:

<Input type = "button" id = valore "bu1" = "Cambia cursore" onclick = "changeCursorById ( 'bu1', 'mirino');" />

Il pulsante prodotto cambierà la sua proprietà "cursore" quando si fa clic. Il valore dell'attributo "id" è utilizzato per identificare l'elemento alla funzione.

3 Utilizzare uno dei seguenti valori per il "cursore" di proprietà: "aiuto", "movimento", "puntatore", "progresso", "testo", "attendere", "mirino", "n-resize", "ne- ridimensionare "," e-resize "," se-resize "," s-resize "," SW-ridimensionamento, "" w-resize ", e" nw-ridimensionamento. " È inoltre possibile utilizzare "auto", "default" e "ereditano". Se si sceglie "Auto", il cursore del browser normalmente utilizzare per tale elemento è assegnato. Se si sceglie "di default", viene utilizzato il cursore a freccia regolare. Un esempio di distinzione è che se si assegna "default" a un tag "p", il cursore non si trasformerà in un I-beam in quanto normalmente sarebbe su quel punto, ma rimarrà come la freccia di default. "Eredita" assegna lo stesso cursore l'elemento come suo elemento genitore (il tag è annidato all'interno).

4 Modificare il cursore su un'immagine personalizzata come questo:

changeCursorById ( 'bu1', 'URL (customcursor.cur)');

Cursore immagini devono essere memorizzate sul server sia come file "ani" "cur" o.

5 Utilizzare la seguente funzione per modificare la proprietà cursore per tutti gli elementi di un tipo in una pagina:

Funzione changeCursorByTagName (tag, corr) {

for (var i = 0; i <document.getElementsByTagName (tag) .length; i ++) {

document.getElementsByTagName(tag)[i].style.cursor = cur;

}

}

Utilizzare un nome di tag, come "p", invece di un ID.