|
|
text following cursor
You can instruct the browser to have a string of text follow the cursor around anywhere in the active window. We first determine the X and Y co-ordinates of the mouse pointer. Then we determine some idea a to what the text should look like and assign them with common CSS rules. Positioning is determined and the text is set to follow the pointer while the X and Y co-ordinates are being generated and passed along the bubbling order of the JavaScript functions in the HEAD of the document.
The text is actually always there – we just set it to hidden with the style.visibility attribute and to visible when we need to. The onMouseMove event handler triggers the JavaScript functions when you move the cursor on the X or Y axis one pixel. If you stay still, so will the text.
To have a finer degree of control over the rendering of the moving – if it looks jerky – just alter the amount that the X or Y axis is incremented with every iteration of the script. A smaller value will result in a smoother look, but might lag a little behind if you’re showing a lot of text trailing behind the cursor or if the computer is being used heavily. If this is a concern, increase the increment of the positioning and the text will move quicker and will stay with the cursor.
<html>
<head>
<script type="text/javascript">
function cursor(event) {
document.getElementById('trail').style.visibility="visible";
document.getElementById('trail').style.position="absolute";
document.getElementById('trail').style.left=event.clientX+10;
document.getElementById('trail').style.top=event.clientY;
}
</script>
</head>
<body onmousemove="cursor(event)">
<h1>Move the cursor over this page</h1>
<span id="trail" style="visibility:hidden">Cursor Text</span>
</body>
</html>
You can assign an image to follow the cursor as well. Just state a simple IMG tag with the same attributes given above for the textual version. The co-ordinate system works the same for text as it does for images, as it’s initially based not on the location of the text or image, but on the position of the mouse pointer.
|
|
