How to position an animated cursor

[balki]

Thank you very much! It looks great on the site.

[jscheuer1]

Does look pretty good. I was playing around with this a bit more and realize that I probably made the margins too large:

#anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 5px; margin-top: 5px;}

It has to have some margin, otherwise it will cover links, making them unclickable. But using 5px seems to offset it more than necessary from the links. I'm using 2px now, and that seems better:

#anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 2px; margin-top: 2px;}

Also, though this is less important, I made the script code more efficient. This doesn't change the functionality, but may make it more responsive to the user moving the mouse:

<script>
(function(){
	var cur = document.getElementById('anicursor').style, lcur = new Image(), w = window, d = document;
	lcur.src = 'ani-on.gif'; // path to link cursor
	d.addEventListener('mouseover', function(e){
		var linktarget = e.target.tagName === 'A' || e.target.parentNode.tagName === 'A';
		cur.backgroundImage = linktarget? 'url(' + lcur.src + ')' : '';
		}, false
	);
	d.addEventListener('mousemove', function(e){
		var x = e.x, y = e.y;
		cur.visibility = x > w.innerWidth - 4 || y > w.innerHeight - 4? '' : 'visible';
		cur.left = x + 'px';
		cur.top = y + 'px';
		}, false
	);
	w.addEventListener('mouseout', function(e){
		cur.visibility = '';
		}, false
	);
})();
</script>

Edit: On second thought, played with it a bit more and changed 2 to 4 within the script (red, two places), seems better. This controls how quickly and efficiently the custom cursor disappears at the right edge and bottom edge of the browser when the mouse is leaving the page.

[balki]

Thank you again! I've applied the fixes and everything looks great.