Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Changing cursors

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I'm trying to write some code that will change the mouse pointer from one custom cursor to another depending on what the user's doing. I know that custom cursors in browsers are a (relatively) new concept, but both IE6 and Firefox 1.5.x and above should be able to handle them, right?

OK, here's my example in action:

http://thegrapevine.brinkster.net/Temp/cursor.html

Outside the box the cursor should be white (default), and inside it should be green. Then when the user clicks inside the box it should go blue then green again when the mouse is released.

But in IE6 this only works for the first click before it falls over. And in FF it does not work at all.

Here's the simple code:

<html>
<head>

<style type="text/css">

.table_borders
{
border: 1px solid #333333;
}
</style>

<script language="Javascript">

function cursor1()
{
div1.style.cursor = "url('green.cur')";
window.status = "up";
}


function cursor2()
{
div1.style.cursor = "url('blue.cur')";
window.status = "down";
}

</script>

</head>
<body>

<div class="table_borders" name="div1" id="div1" style="cursor:url('green.cur'); width:400px;height:400px;" onMouseDown="cursor2();" onMouseUp="cursor1();">
click in here
</div>

</body>
</html>



And a link to my two cursors to test it with:

http://thegrapevine.brinkster.net/Temp/green.cur

http://thegrapevine.brinkster.net/Temp/blue.cur


Any thoughts, chaps?

Many thanks in advance.

Mark.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I would do something like this:



Now the thing is the onmousedown requires you to move the cursor for it to change. Also there is a slight delay for the image download.

Eric
 
Mark JM Taylor
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hmmmm, yes, I see what you mean. I wonder if there's any way of forcing the cursor to refresh without moving the mouse.

It seems the implementation for custom cursors is almost an afterthought. And running the code in Firefox just gives 'Error in parsing value for property 'cursor'. Declaration dropped.'
 
The government thinks you are too stupid to make your own lightbulb choices. But this tiny ad thinks you are smart:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic