Changing origional mouse cursors to a custom graphic?

[Bry Man]

Hey ive been doing a really big remodel on my site and im looking for little things to make it more "user friendly" and i thought having a coustom mouse cursor would be good for adding a little interesting bit to my site, Is it possible to change the original arrow pointer and all the other forms of it into a couston graphic if so please tell me:cool:

Thanks to those who reply

[webmarkart]

It doesnt work in all browsers, but you can do it using css:


<style type="text/css">
BODY {cursor:url("images/fish2.cur")}
</style>


Go to www.soundviewscuba.com to see an example of this code... I think it only works in later versions on IE though...

[redhead]

only works in IE5.5+:rolleyes:

[Bosko]

Correction,this only works in Internet Explorer 6 at the moment,but it is part of the CSS specification (unlike the stupid hand/pointer bull**** in IE).
You should specifiy multiple cursors,so that the useragent will pick the one that it can display.

[redhead]

whoops... my bad. must be the coloured scrollbars that only work in ie5.5+... ;)

[Bosko]

Correction,colored scrollbars work in Konqueror 2+ too.

[zoobie]

Use it anyway because the older browsers will just default to the pointer. Colored scrollbars were IE5.5 with custom cursor in IE6. :D

[Bry Man]

Is there any way to change the different forms of the cursor like can i change it to another graphic when i mouseover a url or just all urls in general?

[zoobie]

Since it's called upon with css, it can be switched for anything you wish including mouseovers (?) using .className

Someone else will have to demo...I'm too tired

[webmarkart]

to change it on a link for example is easy:


a {
color:#07a;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}

a:hover {background-color:#eee;cursor:help;}

[zoobie]

a:hover {cursor:url("images/fish9.cur")} :D

[redhead]

Since it's called upon with css, it can be switched for anything you wish including mouseovers (?) using .className

methinks this is what zoobie meant:


<style>
.off {
cursor: url('cursor.cur');
}

.on {
cursor: url('special.cur');
}
</style>

<table>
&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;<td onmouseover="className='on';" onmouseout="className='off';" class="off">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mouse over here...
&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;<tr>
</table>