How to position an animated cursor

[balki]

I'm trying to put an animated cursor on this page: http://szuspehi.blogspot.bg/p/blog-page_16.html
Unfortunately, gif moves down and to the right. It does not respond to the absolute positioning values.
The second problem is how to hide the default cursor.
This is the animated cursor code:


<style type="text/css">
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
</style>

<script type="text/javascript">

//Visit http://www.rainbow.arch.scriptmania.com for this script

kisserCount = 1 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000000 //duration images stay on screen (in milliseconds)
kissSpacer = 0 //distance to move mouse b4 next heart appears
theimage = "http://www.souhssz.setra.icnhost.net/aj/ani.gif" //the 1st image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {

posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX)
} else {
return (parseInt(event.clientX) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = '" + processedx + "px'")
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = '" + y + "px'")
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
</script>


<script type="text/javascript">
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')

}
}
kissbegin();
</script>

I'm glad if someone can help me :D

[balki]

I "hid" the default cursor by replacing it with a transparent pixel:

<style type="text/css">body, a, a:hover {cursor: url(https://lh3.googleusercontent.com/-wJWSIFL2g1Q/WX9Xpk_cC3I/AAAAAAAAGnQ/V93q3liReggMfnKJD6wl0vX7SdrxHZcPACLcBGAs/h120/1px.gif), progress;}</style>

Now the only problem is how to position the cursor?

[balki]

Other solutions do not work in all browsers. But why I can not move the animated image cursor?

[jscheuer1]

Maybe try this:

https://codepen.io/tamm/pen/LIFam

[balki]

But I want the beauty of this cursor: 6194

PS: I think the code did not work temporarily. It is currently written correctly, as outlined on the first post. You will see the cursor but downward.

[jscheuer1]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {cursor: none;}
#anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000;}
</style>
</head>
<body>
<div id="anicursor"></div>
<script>
document.addEventListener('mousemove', function(e){
var cur = document.getElementById('anicursor');
cur.style.visibility = 'visible';
cur.style.left = e.x + 'px';
cur.style.top = e.y + 'px';
}, false
);
</script>
</body>
</html>

[jscheuer1]

Here's a better version:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {cursor: none;}
#anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 5px; margin-top: 5px;}
</style>
</head>
<body>
<div id="anicursor"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat, orci eget hendrerit imperdiet, dui velit pharetra odio, non ornare ipsum tortor vel nulla. Integer ultricies justo arcu, sit amet egestas nunc consequat at. Pellentesque pretium elit sit amet dapibus laoreet. Morbi nec rhoncus risus, id molestie massa. Aliquam sit amet porta tortor, in porta mauris. Duis condimentum velit tellus, vel consequat neque euismod vitae. Nunc quis erat a lectus placerat posuere. Sed feugiat cursus consectetur. In bibendum, erat at lacinia vestibulum, elit est fringilla velit, sit amet scelerisque dolor quam nec lorem.

Phasellus at neque tincidunt, feugiat dui et, maximus lectus. Quisque tristique nisl in velit vehicula tincidunt. Quisque iaculis iaculis tellus, ac porttitor ex porta id. Maecenas sed erat iaculis, fringilla nibh sit amet, tempus arcu. Maecenas at nisl et enim iaculis fermentum in ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas condimentum ipsum eu risus blandit bibendum.

Duis massa lectus, feugiat sit amet eros non, dignissim tristique nibh. Mauris eget tortor vehicula ante hendrerit egestas. Sed maximus sem eu commodo porta. Proin accumsan egestas dictum. Nunc ultrices ornare sollicitudin. Pellentesque ut turpis odio. Vestibulum cursus et orci sit amet consequat. Praesent imperdiet nisl quis turpis vehicula tempor.

Morbi faucibus a orci sed aliquet. Integer finibus scelerisque odio auctor hendrerit. Donec risus sem, dictum ac interdum sit amet, efficitur et lacus. Donec id ipsum vel lorem feugiat suscipit ut sed leo. Proin porttitor nisi tortor, quis iaculis orci rutrum a. Nam mollis massa id leo rutrum, eu ornare ante cursus. Nunc imperdiet bibendum nisl, nec rutrum dui varius vitae.

Maecenas et ullamcorper ipsum. Donec tincidunt posuere magna, eget sagittis turpis congue sit amet. Phasellus et venenatis elit, et feugiat est. Curabitur imperdiet blandit efficitur. Sed pulvinar convallis arcu eu mollis. Pellentesque interdum risus a commodo porttitor. Pellentesque tristique lorem vel nunc hendrerit, sed commodo arcu accumsan. Proin in nisi aliquet, egestas magna nec, luctus massa. Praesent in congue lorem, vitae tempus sem. Aliquam augue nibh, elementum eu lobortis vitae, dapibus vel tellus.</div>
<a href="http://www.google.com/">Google</a>
<script>
document.addEventListener('mousemove', function(e){
var cur = document.getElementById('anicursor'), x = e.x, y = e.y, w = window;
cur.style.visibility = x < 2 || y < 2 || x >= w.innerWidth - 1 || y >= w.innerHeight - 1? '' : 'visible';
cur.style.left = x + 'px';
cur.style.top = y + 'px';
}, false
);
</script>
</body>
</html>

[jscheuer1]

Better still I think:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {cursor: none;}
#anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 5px; margin-top: 5px;}
</style>
</head>
<body>
<div id="anicursor"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat, orci eget hendrerit imperdiet, dui velit pharetra odio, non ornare ipsum tortor vel nulla. Integer ultricies justo arcu, sit amet egestas nunc consequat at. Pellentesque pretium elit sit amet dapibus laoreet. Morbi nec rhoncus risus, id molestie massa. Aliquam sit amet porta tortor, in porta mauris. Duis condimentum velit tellus, vel consequat neque euismod vitae. Nunc quis erat a lectus placerat posuere. Sed feugiat cursus consectetur. In bibendum, erat at lacinia vestibulum, elit est fringilla velit, sit amet scelerisque dolor quam nec lorem.

Phasellus at neque tincidunt, feugiat dui et, maximus lectus. Quisque tristique nisl in velit vehicula tincidunt. Quisque iaculis iaculis tellus, ac porttitor ex porta id. Maecenas sed erat iaculis, fringilla nibh sit amet, tempus arcu. Maecenas at nisl et enim iaculis fermentum in ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas condimentum ipsum eu risus blandit bibendum.

Duis massa lectus, feugiat sit amet eros non, dignissim tristique nibh. Mauris eget tortor vehicula ante hendrerit egestas. Sed maximus sem eu commodo porta. Proin accumsan egestas dictum. Nunc ultrices ornare sollicitudin. Pellentesque ut turpis odio. Vestibulum cursus et orci sit amet consequat. Praesent imperdiet nisl quis turpis vehicula tempor.

Morbi faucibus a orci sed aliquet. Integer finibus scelerisque odio auctor hendrerit. Donec risus sem, dictum ac interdum sit amet, efficitur et lacus. Donec id ipsum vel lorem feugiat suscipit ut sed leo. Proin porttitor nisi tortor, quis iaculis orci rutrum a. Nam mollis massa id leo rutrum, eu ornare ante cursus. Nunc imperdiet bibendum nisl, nec rutrum dui varius vitae.

Maecenas et ullamcorper ipsum. Donec tincidunt posuere magna, eget sagittis turpis congue sit amet. Phasellus et venenatis elit, et feugiat est. Curabitur imperdiet blandit efficitur. Sed pulvinar convallis arcu eu mollis. Pellentesque interdum risus a commodo porttitor. Pellentesque tristique lorem vel nunc hendrerit, sed commodo arcu accumsan. Proin in nisi aliquet, egestas magna nec, luctus massa. Praesent in congue lorem, vitae tempus sem. Aliquam augue nibh, elementum eu lobortis vitae, dapibus vel tellus.</div>
<a href="http://www.google.com/">Google</a>
<script>
document.addEventListener('mousemove', function(e){
var cur = document.getElementById('anicursor'), x = e.x, y = e.y, w = window;
cur.style.visibility = x > w.innerWidth - 2 || y > w.innerHeight - 2? '' : 'visible';
cur.style.left = x + 'px';
cur.style.top = y + 'px';
}, false
);
window.addEventListener('mouseout', function(e){
document.getElementById('anicursor').style.visibility = '';
}, false
);
</script>
</body>
</html>

But you have to remember, whatever you do, this might be a problem on touch devices (though apparently not in my emulator). Oh, and for Firefox, add this to the style section:


html {height: 100%;}

[balki]

It works perfectly. Thank you so much!:D

P.S.: Is there a way when mouse point to a hyperlink to change cursor with another animated gif?

[jscheuer1]

Sure, replace the current script with this one:


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

Notice the highlighted line:


lcur.src = 'ani2.gif'; // path to link cursor

The red is where to put the path (if any) and filename to the link cursor.

[balki]

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

[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>

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.