Hot Scripts Forums - View Single Post

job0107 · #2 (**permalink**) 10-20-09, 07:49 AM

Attaching an image to the mouse pointer is kind of simple.
I have attached the onmousemove event to the document so the image element always follows the mouse pointer.

In the image element I use the onmouseover event listener to assign an image to the image element and make it visible.
And I use the onmouseout event listener to make the image element invisible.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<style>
span{
 cursor:pointer;
 color:blue;
}
#img1{
 position:absolute;
 width:100px;
 height:100px;
 display:none;
}
</style>
<script type="text/javascript">
var y_offset = 10;
var x_offset = 15;
function moveImage(){
 document.getElementById('img1').style.top = event.y + y_offset + "px";
 document.getElementById('img1').style.left = event.x + x_offset + "px";
}
function moveImageMOZ(e){
 document.getElementById('img1').style.top = e.pageY + y_offset + "px";
 document.getElementById('img1').style.left = e.pageX + x_offset + "px";
}
function showImage(obj){
 document.getElementById('img1').src = obj;
 document.getElementById('img1').alt = obj;
 document.getElementById('img1').style.display = "block";
}
function hideImage(){
 document.getElementById('img1').style.display = "none";
}
if(!document.all){
 window.captureEvents(Event.mouseMove);
 window.onmousemove=moveImageMOZ;
}
else{document.onmousemove=moveImage;}
</script>
</head>
<body>
Take a look at <span onmouseover="showImage('image1.jpg');" onmouseout="hideImage();"><i><b><u>image 1</u></b></i></span>.
<br /><br />
Take a look at <span onmouseover="showImage('image2.jpg');" onmouseout="hideImage();"><i><b><u>image 2</u></b></i></span>.
<img id="img1" src="" alt="" />
</body>
</html>