javascript onclick custom cursor

Question

I have been using:

    <script>
function change()
{
document.body.style.cursor="url('xx/xx.cur'),auto";
}
</script>

<div onClick="change()"></div>

It works, but its important that the cursor resets while there is no click so i tried the onBlur, but it didnt work.

At last I found this:

<script type="text/javascript"> 
   function change() { 
   document.body.style.cursor=(document.body.style.cursor=="help") ? "default" : "help"; 
} 
</script> 
</head> 
<body> 
<div onmousedown="change()" onmouseup="change()">  </div>

which works like a charm, but it failed to replace the cursor standard styles with custom .curs.

Here:

    function change()
{
document.body.style.cursor=(document.body.style.cursor=="url ('xx/xx3.cur')") ? "url ('xx/xx1.cur')" : "url ('xx/xx3.cur')";
}
</script>
</head>
<body>

<div onmousedown="change()" onmouseup="change()" id="container">

Obviously the double parentheses are troublesome. I tried everything without success. Any help apreciated. Thanks in advance.

Rasmus · Accepted Answer · 2013-02-06 20:23:03Z

1

I would probably tackle this problem with some simple css magic instead.

Instead of actually assigning body.style.cursor a value with javascript I would toggle a class on the html-tag which in turn shows the correct cursor.

CSS:

html
{
    cursor: default;
}

html.help
{
    cursor: url('help.cur');
}

Javascript:

function change()
{
    $("html").toggleClass("help")
}

Working jsfiddle: http://jsfiddle.net/BV3kn/2/

edited Feb 6, 2013 at 20:23

answered Feb 6, 2013 at 19:40

Rasmus

4,1907 gold badges25 silver badges32 bronze badges

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

7 Comments

Jim Over a year ago

Hmm it seems that its not working. Maybe a way to break the double parentheses would do the trick.

Rasmus Over a year ago

Do you get any error-messages at all? Checked console? What double parentheses?

Jim Over a year ago

I don't get any errors it just doesn't work. The double parentheses part: document.body.style.cursor=(document.body.style.cursor=="url ('xx/xx3.cur')*<here>*") ? "url ('xx/xx1.cur')" : "url ('xx/xx3.cur')";

Rasmus Over a year ago

After some fiddling around I found out that it takes a while for the mouse-cursor to change unless you move it. But if you move it the selection-cursor becomes the active one. jsfiddle.net/BV3kn/1 Working example though, maybe someone else can give you a better answer, I'm off to bed.

Rasmus Over a year ago

I edited my comment, read it again for better info! :) jsfiddle.net/BV3kn/2

|

Collectives™ on Stack Overflow

javascript onclick custom cursor

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related