Entry
How can I attach an image to the mouse cursor?
Apr 2nd, 2002 05:09
Martin Honnen, Bart Mortelmans,
This is an updated entry that has been tested to work with NN4, NN6
and IE6/Win (and should work with IE5/5.5/Win too).
To attach the image to the cursor it is placed into an absolutely
positioned span element which is then onmousemove repositioned. For
NN6 and IE5.5+ the more advanced addEventListener respectively
attachEvent are used so that the code doesn't collide with other DHTML
code which might be attached to document.onmousemove.
A further improvement is that for IE the image is repositioned when
the window is scrolled.
The code has also been improved to work with IE6 whether a document
type definition is present or not.
I also tried the code to work with Opera 6 but somehow the
window.pageXOffset/window.pageYOffset that Opera sets are not correct
so the code works for Opera 6 only as long as the page is not scrolled.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
image attached to cursor
</title>
<style type="text/css">
#imageContainer {
position: absolute;
z-index: 100;
visibility: hidden;
}
</style>
<script type="text/javascript">
var cursorStarted = false;
var imageContainer;
function startImageCursor () {
if (document.getElementById)
imageContainer = document.getElementById('imageContainer');
else if (document.all)
imageContainer = document.all.imageContainer;
else if (document.layers)
imageContainer = document.layers.imageContainer;
if (document.addEventListener)
document.addEventListener('mousemove', cursorHandler, false);
else if (document.attachEvent)
document.attachEvent('onmousemove', cursorHandler);
else
document.onmousemove = cursorHandler;
if (document.layers)
document.captureEvents(Event.MOUSEMOVE);
if (typeof window.onscroll != 'undefined')
window.onscroll = scrollCursorHandler;
}
function cursorHandler (evt) {
if (document.addEventListener) {
imageContainer.style.left = evt.clientX + window.pageXOffset
+ 'px';
imageContainer.style.top = evt.clientY + window.pageYOffset + 'px';
}
else if (window.opera) {
imageContainer.style.left = evt.clientX + window.pageXOffset
+ 'px';
imageContainer.style.top = evt.clientY + window.pageYOffset + 'px';
}
else if (window.event) {
if (document.compatMode && document.compatMode != 'BackCompat') {
imageContainer.style.left = event.clientX +
document.documentElement.scrollLeft + 'px';
imageContainer.style.top = event.clientY +
document.documentElement.scrollTop + 'px';
}
else {
imageContainer.style.left = event.clientX +
document.body.scrollLeft + 'px';
imageContainer.style.top = event.clientY +
document.body.scrollTop + 'px';
}
}
else if (document.layers) {
imageContainer.left = evt.pageX;
imageContainer.top = evt.pageY;
}
if (!cursorStarted) {
if (document.layers)
imageContainer.visibility = 'show';
else
imageContainer.style.visibility = 'visible';
}
}
function scrollCursorHandler (evt) {
if (window.event) {
if (document.compatMode && document.compatMode != 'BackCompat') {
imageContainer.style.left = event.clientX +
document.documentElement.scrollLeft + 'px';
imageContainer.style.top = event.clientY +
document.documentElement.scrollTop + 'px';
}
else {
imageContainer.style.left = event.clientX +
document.body.scrollLeft + 'px';
imageContainer.style.top = event.clientY +
document.body.scrollTop + 'px';
}
}
}
</script>
</head>
<body>
<span id="imageContainer"><img name="cursorImage"
src="http://www.kibo.com/kiboarch/kibo_inside_icon.gif"
alt="Kibo inside"></span>
<script type="text/javascript">
startImageCursor();
</script>
<!-- fill the page with content -->
<script type="text/javascript">
for (var i = 0; i < 100; i++)
document.write(i + ' Kibology<br \/>');
</script>
<div style="position: absolute;
left: 1200px; top: 200px;"
>
Should allow scrolling to the right on most screens.
</div>
<!-- end of test page content -->
</body>
</html>
![http://www.kibo.com/kiboarch/kibo_inside_icon.gif"](http://www.kibo.com/kiboarch/kibo_inside_icon.gif"){kind=link}