Geek Answers Handbook

Change mouse cursor on html page

I need a way to change the mouse cursor on an html page. I know that this can be done using css, but I need to be able to change it at runtime, for example, with buttons on the page, and when they are clicked, they change the cursor to a specific graphic. I think the best (or only?) Way to do this is through javascript? Hopefully there will be a good thing that will work on all major browsers. I would be very grateful if someone could help me with this.

Thanks in advance

+7
javascript css
source share
6 answers

Thanks for answers. I finally started to work. Here is how I did it:

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

I found out that in order to work in Firefox you have to go through at least two cursor options, for example. cursor = "url ('cursor1.cur'), ​​by default" Or else it won’t work. In addition, in Firefox it does not work with ani-cursors, but only cur. That is why I put cur after ani. Ani will appear in IE, cur in Firefox.

Does anyone know if it is possible to change the cursor in IE without warning Active-X, and the user should accept?

+6
source share

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

Here is an example below.

+3
source share

This is easy if you want to do this only in links. There you have CSS:

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

Since: active will not work for elements other than a, you can use Javascript specified by Prestaul and scunliffe.

+1
source share

Using jQuery:

 $('.myButton').click(function(){ $(this).css('cursor', 'url(/url/to/cursor/image)'); });
+1
source share
 //you can set all the normal cursors like this someElem.style.cursor = 'progress';

What special cursor do you want? ... maybe there is a better option.

-one
source share
 // 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)";
-one
source share

More articles:


All Articles