Webmaster Cash Program
 Upload & Sell Your Software
Upload & Sell Your Ebook
 Enter The AWT Service Center  Contact Applied Web Tools
 Purchase Some Advertising  Password Troubles? Click Here!
Knowledge Center
Want to write for Applied Web Tools? Send your Writer's Query to
Editor@AppliedWebTools.net for details.
HTML
Reference
&
Tutorial
CSS
Reference
&
Tutorial
DOM
Reference
&
Tutorial
JavaScript
Reference
&
Tutorial
50+ Programming Examples
Use HTML, CSS, DOM & JavaScript Together
Misc. Essays & Documents
You'll Find Just About Anything In Here
50+ Web Page Constructions
Learn the Art of Using HTML, CSS, DOM & JavaScript Together
 Changing Background Colors
 Event Triggering With onLoad
 Disabling The Right Click
 DOM Driven Color Changing
 Switching Images
 innerHTML Attribute Access
 Change With innerHTML
 Changing Positions
 Change Position With onMouseMove
 Change Text Position
 Interactivity Skills
 Type-writing A Message
 Auto-changing Text Size
 Making Text Scroll
 Blinking Text
 Simple Form Authentication
 Change Background Color Of An INPUT
 Change Text Color Of An INPUT
 Change Background Image Of An INPUT
 Select All Checkboxes
 Select Color Of The Submit Button
 Change Text Color Of A Submit Button
 Insert Background Image To A Button
 Change Color Of Drop Down List
 Change Text Color Of A Drop Down List
 Change Color Of A TEXTAREA
 Change The Text Color Of A TEXTAREA
 Insert An Image Into A TEXTAREA
 Change The Size Of An Image
 Change The Source Of An Image
 Change The Position Of An Image
 Change The Background Image
 Moving Images Around The Page
 Drag & Drop An Image
 A Simple Image Viewer
 A Shaking Image
 A Digital Clock
 Drop Down List Link
 Top Drop Down Menu
 Always On Top Menu
 Inset Border Buttons
 A Description Generating Menu
 An Image Generating Menu
 A Horizontal Sliding Menu
 A Click Horizontal Sliding Menu
 Returning Cursor Co-ordinates
 Making Text Follow The Cursor
 Attaching An Image To The Cursor
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.
Want a copy of the Applied Web Tools Knowledge Center on your site?

Over 1200 individual command definitions in a really cool interface

Send your query to Sales@AppliedWebTools.net for details
I do not employ cookies or tracking devices of any kind