how custom cursor with image?

[davelf]

How to custom our cursor with our own image, png / gif / bmp?
Is it possible? and how about cross browser thing?

I find a lot of articles talking about this, but they recommend using .cur instead png / gif / bmp?

Thx in advanced

[deathbycheese]

There are free cursor-creating apps you can try like JustCursors. Just be sure to include a default cursor at the end of your CSS for compatibility like this:

cursor: url("./images/yourimage.cur"), pointer;

dbc

[davelf]

thx for the reply deathbycheese, i know how to use the .cur to customize the cursor, i just want to know how to use .gif / .png / .bmp

[jscheuer1]

You can make up your own custom image for the cursor in any format supported as an ordinary image in browsers (.png, .gif, .jpg, .bmp, possibly one or more others). Then you setup a javascript to track the mouse's position and have it dictate where your image goes. But there are two major drawbacks:

1. Because movement of the image over the page will sometimes lag behind movement of the mouse over the page, sometimes the mouse will be over your image when it should be over something else like a link or activating control of another script. This is particularly annoying and obvious if you have some other script that does something onmouseover/mouseout of something on the page.
   
   
   
2. If you really want to replace the cursor, you still need a custom .cur cursor - a transparent one. That's is easy enough to do, I have one in fact I could give you. I'm not sure how widely supported the custom .cur is though. IE and Firefox support it. Some browsers at least will still be showing some sort of visible cursor.

Notes:

Although only for IE:

http://www.dynamicdrive.com/dynamici.../crosshair.htm

could give you some ideas on tracking the mouse and how this can be done in general, as could various cursor trailer scripts here on DD. These are all old, so would need updating. I'd recommend using jQuery for tracking and positioning though, it would be cross browser. Quirksmode dot com has routines for doing that sort of stuff using ordinary javascript.

For more ideas, see:

http://www.dynamicdrive.com/dynamici.../kisstrail.htm

and the entire index:

http://www.dynamicdrive.com/dynamicindex13/

[davelf]

thank you so much john for your reply.

I already try the list at mouse and cursor, and i found the very similar one like i want to adopt in my website.

This one is good example for my study case
http://www.dynamicdrive.com/dynamici...tomcursor2.htm

He use .gif for the cursor, but there's problem with the javascript.
If i make different width / height image, the image that i used didn't show full, it cut.
I already read the sources code too, but still can't find how to set the width and height for the cursor.

thanks in advanced...

[jscheuer1]

I assume you found this bit:

	// private properties. Cursor attributes. Do not touch! :)
	cursor : {
		lt : { x : '0px',	y : '0px',	w : '19px',	h : '26px' ,	dx : -22,	dy : -22 },
		rt : { x : '19px',	y : '0px',	w : '26px',	h : '19px' ,	dx : -3,	dy : -22 },
		rb : { x : '26px',	y : '19px',	w : '19px',	h : '26px' ,	dx : 4,		dy : -3 },
		lb : { x : '0px',	y : '26px',	w : '26px',	h : '19px' ,	dx : -22,	dy : 4 }
	},

Best I can figure he has divided the custom cursor image visually into 4 quadrants for positioning around the mouse's position. lt - left top, rt - right top, rb - right bottom, and lb - left bottom. the w is the width for each of these and the h is the height for each of these. They all end up as position absolute, overflow hidden, so anything outside these dimensions will be clipped. In other words, the custom image becomes a sprite. The x and the y are top and left coordinates that I imagine are used to get the desired portion of the image to show in each quadrant. The dx and dy are used when dynamically positioning the custom cursor. I think they are how far from the mouse position horizontally (dx) and how far from the mouse position vertically (dy) the upper left corner of that quadrant needs to be. Presumably all this allows for a tiny space in the middle for the real cursor to be where it needs to be in order to activate links and mouseovers on the document. He has chosen the browser's crosshair cursor because it fits well into his custom image. There will still be times when there is the lag I mentioned in my previous post.

By the way, I notice that just above that section he has:

	// private properties. Browser detect. Do not touch! :)
	IE : ( document.all && document.getElementById && !window.opera ),
	FF : (!document.all && document.getElementById && !window.opera),
	OP : (document.all && document.getElementById && window.opera),

That's no longer accurate. Opera, though last I checked still supports document.all when used, it now returns false for document.all as a method. As a result the script will not work in Opera. You can change it to:

	// private properties. Browser detect. Do not touch! :)
	IE : ( document.all && document.getElementById && !window.opera ),
	FF : (!document.all && document.getElementById && !window.opera),
	OP : (document.getElementById && window.opera),

and hope for the best. This will only affect Opera, giving it a fighting change of rendering the custom cursor.

[davelf]

thanks John, like you explain up there. the X and Y is the main configuration for with and height.