How to Use OnMouseOver and OnMouseOut
- 1). Place JavaScript functions between the "head" tags of your HTML document containing the code you'd like to be executed when the "onmouseover" and "onmouseout" events occur. Use this template to get started:
<script type="text/javascript">
function overhandler() {
alert("MouseOver event for: " + this.id);
}
function outhandler() {
alert("MouseOut event for: " + this.id);
}
</script>
These functions will simply display alert dialogs when the respective events are triggered. Place any JavaScript code you like in these functions. Note the use of the "this" keyword; "this" in this context will refer to the object whose event handler was triggered if you attach the event handler with JavaScript statements. - 2). Add "onmouseover" and "onmouseout" event handlers as attributes of HTML tags in the body of your document to attach them to objects. Here is an example:
<img src="image.jpg" onmouseover="overhandler();" onmouseout="outhandler();">
The "this" keyword won't be available in the event handler functions when you attach them this way, so if you need to use "this" refer to the method in Step 3 or explicitly pass in the object reference like this:
onmouseover="overhandler(this);"
If you pass the reference this way, receive the object reference in your function by declaring it in the "head" tags this way:
function overhandler(obj) {
Then use "obj" where you would have used "this." - 3). Add the following code to the bottom of the "body" section of your HTML document to assign event handlers using JavaScript statements:
<script type="text/javascript">
document.getElementById("image1").onmouseover = overhandler;
document.getElementById("image1").onmouseout = outhandler;
</script>
This example uses the "id" attribute to specify which object to attach the event handlers to. Attach handlers to many objects of the same type at once using a routine like this:
<script type="text/javascript">
imgs = document.getElementsByTagName("img");
for(i in imgs){
imgs[i].onmouseover = overhandler;
imgs[i].onmouseout = outhandler;
}
</script>
In both of these examples, the "this" keyword is made available to the function when the event occurs. Make sure to place these "script" tags at the bottom of the "body" section so that the code is executed after the HTML elements have been loaded.