2009-07-31 25 views
7

Ho bisogno di un modo per cambiare il cursore del mouse su una pagina HTML. So che questo può essere fatto con css, ma ho bisogno di essere in grado di cambiarlo in fase di runtime, come ad esempio avere pulsanti sulla pagina, e quando vengono cliccati cambiano il cursore su un grafico personalizzato specifico. Penso che il modo migliore (o solo?) Per farlo sia attraverso javascript? Spero che ci sia un modo per farlo bene che funzionerà su tutti i principali browser. Sarei molto grato se qualcuno potesse aiutarmi con questo.Cambiare il cursore del mouse su una pagina HTML

Grazie in anticipo

risposta

6

Grazie per le risposte. Finalmente ho funzionato. Ecco come ho fatto:

<html> 
<head> 
    <script type="text/javascript"> 
     function changeToCursor1(){ 
      document.body.style.cursor="url('cursor1.ani'),url('cursor1.cur'), default"; 
     } 
     function changeToCursor2(){ 
      document.body.style.cursor="url('cursor2.ani'),url('cursor2.cur'), default"; 
     } 
    </script> 
</head> 

<body> 

    <form> 
     <input type="button" value="Change to cursor 1" onclick="changeToCursor1()" /><br> 
     <input type="button" value="Change to cursor 2" onclick="changeToCursor2()" /> 
    </form> 
</body> 

ho scoperto che per farlo funzionare in Firefox si must passaggio di almeno 2 scelte di cursori, ad esempio, cursor = "url ('cursor1.cur'), ​​default" Altrimenti non funzionerà. Inoltre, in Firefox non funziona con ani-cursors, solo cur. Questo è il motivo per cui ho messo un freno dopo ani. L'ani apparirà in IE, il primo in Firefox.

Qualcuno sa se è possibile cambiare il cursore in IE senza che venga visualizzato l'avviso X attivo e che l'utente debba accettare?

-1
//you can set all the normal cursors like this 
someElem.style.cursor = 'progress'; 

Qual è il cursore speciale che si desidera? ... forse c'è un'opzione migliore.

-1
// Get the element you want to change the cursor for 
var el = document.getElementById('yourID'); 

// This image url is relative to the page url 
el.style.cursor="url(pathToImage.png)"; 
1

È facile se si desidera eseguire questa operazione solo sui collegamenti. Ci avete un po 'di CSS in questo modo:

a:hover { cursor: crosshair; } #this is when you mouseover the link 
a:active { cursor: wait; } #this is the moment you click it 

dal: attivo non funziona per gli altri elementi di A, si consiglia di utilizzare il Javascript dichiarato da Prestaul e scunliffe.

1

utilizzando jQuery:

$('.myButton').click(function(){ 
    $(this).css('cursor', 'url(/url/to/cursor/image)'); 
}); 
Problemi correlati