Help with changing cursor to an image

andypandyrox456 · April 6th, 2010, 09:05 PM

Hello everyone!
In this book, it says how you can change the appearance of the cursor to different cursors, such as the hourglass, hand...
You can also change it to an image, but there is no sample code that tells me how to do this.
Can someone please give me a sample CSS code for this?
Let's suppose the image was called "image.png" and in the file "images," therefore the url will look like this - images/image.png

Thanks in advance!

PeterPeiGuo · April 7th, 2010, 10:38 AM

The following works in IE8, Safari and Chrome. Unfortunately not Firefox and Opera.

Code:

<html>
<head>

</head>
<body>
	<h1 onclick="document.body.style.cursor = 'url(3dsmove.cur), default';">Foo</h1>
</body>
</html>

andypandyrox456 · April 7th, 2010, 10:41 AM

Quote:

Originally Posted by PeterPeiGuo

The following works in IE8, Safari and Chrome. Unfortunately not Firefox and Opera.

Code:

<html>
<head>

</head>
<body>
	<h1 onclick="document.body.style.cursor = 'url(3dsmove.cur), default';">Foo</h1>
</body>
</html>

Thanks!
I assume that this only takes .cur file extensions. Am I correct, or can it take .png or .jpeg or .gif also?
Second, can I save images as a .cur file in Paint? I tried it in a program called GIMP, and it didn't allow me to do that.
Third, in that code, it only sets the cursor for that specific <H1> element. Can I make it for the entire body?