changing cursor style using javascript

Question

I am working on a browser game where I am using custom cursors. I am setting up the custom cursor for the entire page in my CSS (for some reason if I set it up for the 'body' sometimes it changes back to default cursor at some area)

html {
  cursor: url("http://www.iwansfactory.com/tycoon/defaultcursor.png"), default;
}

I would like to overwrite the url property of the above CSS using javascript

For example when the user is moving the map I would like to use this custom cursor:

http://www.iwansfactory.com/tycoon/movecursor.png

How can I change this value using javascript? Thanks in advance! :)

document.documentElement.style.cursor = 'url("http://www.iwansfactory.com/tycoon/movecursor.png"), default'; — Rajan Singh
– Rajan Singh, Commented Apr 6, 2016 at 5:25

Rajan Singh · Accepted Answer · 2016-04-06 05:31:56Z

3

document.documentElement.style.cursor = 'url("http://www.iwansfactory.com/tycoon/movecursor.png"), default';

answered Apr 6, 2016 at 5:31

Rajan Singh

6314 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Baldráni · Accepted Answer · 2016-04-06 05:26:34Z

1

The way you explain it, you don't even need javascript ? Why not just do something like

.map:hover{ cursor : url('http://www.iwansfactory.com/tycoon/movecursor.png') }

answered Apr 6, 2016 at 5:26

Baldráni

5,6988 gold badges57 silver badges82 bronze badges

2 Comments

István Over a year ago

I will use a few different cursor (for moving on map, building a road, planting a tree, etc.) sorry for didn't explain it further

Baldráni Over a year ago

Ho then you want it to change on click over something I guess ?

nisar · Accepted Answer · 2016-04-06 05:30:02Z

0

You can try this, If you need js, otherwise follow the above css...

      <span onmouseover="changeCursor(this,'http://www.iwansfactory.com/tycoon/movecursor.png');" onmouseout="changeCursor(this,' url("http://www.iwansfactory.com/tycoon/defaultcursor.png"), default');"> Hello World </span>

        function changeCursor(el, cursor)
        {   

             el.style.cursor = cursor;
         }

answered Apr 6, 2016 at 5:30

nisar

1,0752 gold badges11 silver badges26 bronze badges

Comments

Cheng.Lee · Accepted Answer · 2016-04-06 05:32:51Z

0

if you want the cursor changes to the move-cursor, you could try the event MouseOver to change its style when the mouse hover on the map,and the event MouseOut to return to default.

answered Apr 6, 2016 at 5:32

Cheng.Lee

1963 silver badges12 bronze badges

Comments

acolve · Accepted Answer · 2016-04-06 05:35:27Z

0

You could add css classes for each cursor type, then onmouseenter event apply your game logic to choosing which css class to apply.

answered Apr 6, 2016 at 5:35

acolve

1191 silver badge3 bronze badges

Collectives™ on Stack Overflow

changing cursor style using javascript

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related