onMouseMove
onMouseMove is a document wide event handler that applies to the BODY tag only. You can use a javascript; approach, but that is usually not a good thing, as it clutters up your BODY tag with unneeded attributes. Use a JavaScript function in the HEAD of the document and call it with the onMouseMove event handler as per usual.
<html>
<head>
<script type="text/javascript">
var i=1;
function moveright() {
document.getElementById('header').style.position="absolute";
document.getElementById('header').style.left=i;
i++;
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header">Move the mouse over this page</h1>
</body>
</html>
Note that a variable loaded with a value was used as the parameter of the style.left attribute. This is just to show that a variable name can be used as the value. You may use other JavaScript functions within the rest of the document to calculate the value given in the variable. This will allow a limited sort of dynamic positioning while still receiving the benefits of the rules that govern the absolutely positioned document element.
|