Come modificare il cursore in JavaScript

July 20

Come modificare il cursore in JavaScript


Un impressionante effetto visivo è possibile iniziare immediatamente l'uso sul vostro sito web è la \ "cursore dinamico Change. \" Per innescare questo effetto, è possibile modificare il cursore di un visitatore del sito a volontà. Normalmente quando si pensa di un cursore HTML, visualizziamo una freccia. Questo è il cursore HTML di default. Tuttavia, clessidre, mirino e altre forme del cursore sono disponibili per la visualizzazione pure. cursori clessidra animati sono particolarmente efficaci nel lasciare i visitatori del sito sanno che una pagina è in fase di elaborazione. È possibile modificare un cursore HTML utilizzando JavaScript.

istruzione

1 Creare una pagina HTML che contiene due pulsanti. Impostare la proprietà valore di questi pulsanti a \ "aspettare \" e \ "Crosshair \" come mostrato nell'esempio seguente:

<Input type = \ valore "tasto \" = \ "aspettare \" onclick = \ "ritorno wait () \" />
<Input type = \ valore "tasto \" = \ "Crosshair \" onclick = \ "tornare Crosshair () \" />

Quando si fa clic, questi pulsanti chiameranno loro rispettive funzioni \ "cambiamento del cursore \".

2 Aggiungere un tag JavaScript al codice HTML. Metterete tutto il codice JavaScript all'interno di questo blocco tag.

3 Aggiungere le seguenti funzioni al codice JavaScript:

funzione di attesa () {
document.body.style.cursor = 'attesa'
ANDARE
}

funzione di mirino () {
document.body.style.cursor = 'mirino'
ANDARE
}

Quando viene chiamato, queste funzioni altereranno proprietà "style" dell'oggetto corpo e impostare lo stile cursore \ "aspettare \" o \ "Crosshair \".

4 Aprire la pagina nel browser e fare clic sui pulsanti. L'aspetto del cursore cambia in base al pulsante che si fa clic. In pratica, si sarebbe probabilmente creare una singola funzione in grado di gestire tutti i cambiamenti del cursore. Questa funzione dovrebbe impostare lo stile cursore sul valore passato alla funzione tramite la lista dei parametri.

Consigli e avvertenze

  • Esistono molti stili differenti del cursore. È possibile chiamare le funzioni JavaScript quando si verifica un evento pagina. Ad esempio, è possibile modificare il cursore quando un utente muove il mouse su un'immagine.