JS onClick Cursor Change Problem

Forum Moderators: open

Message Too Old, No Replies

JS onClick Cursor Change Problem

baptizedbyfyre

7:30 pm on Jul 6, 2005 (gmt 0)

I'm using CSS to establish a general page design and would like for the cursor to change from one to another when the user clicks anywhere within a DIV background image.
The style sheet is as follows:

The main page is as follows:
<HEAD>
<TITLE></TITLE>
<LINK REL=stylesheet HREF="./mainstyle.css" TYPE="text/css">
</HEAD>
<BODY>
<DIV ID="logo" onClick="this.style.cursor:url('./pics/mycursor2.ani')">
</DIV>
</BODY>

The browser generates no JS error but the cursor doesn't change (in this case, change to an animated cursor). I tried placing the onClick method within the style sheet #logo{} also, to no effect. Any help would be much appreciated.

Trace

8:34 pm on Jul 6, 2005 (gmt 0)

Maybe if you tried something like this?

onMouseDown="document.body.style.cursor = 'move'"

Change move to whatever you wish. I just tried it and it seems to work.

Rambo Tribble

10:43 pm on Jul 6, 2005 (gmt 0)

Yes, the syntax should be onclick="this.style.cursor='url(etc.)';"

Note that the uri attribute is not well supported. I'm only aware of IE 6 supporting it, though some of the newer Moz or Safari versions may, as it is CSS 2.

baptizedbyfyre

12:43 pm on Jul 7, 2005 (gmt 0)

Thanks for the help. If I use onClick, is there a way to reset the cursor to the original cursor after the new cursor has been loaded? If I use onMouseDown and then follow it with an onMouseUp command, when the user clicks and holds it changes cursors, when the user lets up it changes back cursors, but then when I click again it goes back to the standard Windows arrow. Can you suggest a solution or determine why it does this?
Here is my source:
<BODY STYLE="cursor:url('normalcursor.ani');">
<DIV ID="logo" onMouseDown="this.style.cursor='url(newcursor.ani)';" onMouseUp="this.style.cursor='url(normalcursor.ani)';">
</DIV>
</BODY>