CODEWITHSUNDEEP
javascriptcursor
István
István

Reputation: 127

changing cursor style using javascript

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! :)

Upvotes: 0

Views: 2263

Answers (5)

acolve
acolve

Reputation: 109

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

Upvotes: 0

Cheng.Lee
Cheng.Lee

Reputation: 186

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.

Upvotes: 0

Rajan Singh
Rajan Singh

Reputation: 631

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

Upvotes: 3

nisar
nisar

Reputation: 1065

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

Upvotes: 0

Baldr&#225;ni
Baldr&#225;ni

Reputation: 5638

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') }

Upvotes: 1

Related Questions