Javascript- Onmouseout Event Handler

The Onmouseout event handler in Javascript is an event handler that is triggered when a user moves the mouse cursor away from an element which has the onemouseout event handler attached to it.

Thus, a user places the mouse cursor over an area which as the onmouseout event handler attached to it. Once the user moves the mouse cursor away from the element, the onmouseout event handler is triggered.

This can be used with practically any HTML element, such as a link, an image, a paragraph, a header, etc.

Once triggered, the onmouseout event handler can be programmed to carry out any task or function.

As an example, look at the image below.

It is a mars rover exploring Mar's surface.

Now place the cursor of the mouse over this image and then move the cursor away from the image. The moment the cursor is removed from the element, the image will switch to an image of the mars rover with its infrared laser. If you're interested in this feature of the mars rover, you can visit the wikipedia link here. However, this is not the point of this article. It's to learn Javascript.

Place your mouse cursor over this image and and then remove it from the image to see the change

This is the power of the onmouseout event handler.

HTML Code

The HTML code to create the original image above before it is converted to the version with the laser is:

<img src="/images/mars-rover-no-laser.png"
id="image"
onmouseout="changeimage()">

The <img> tag must have an id attribute, which in this case is image. It also has an onmouseout event handler attached to it. When triggered, this event handler will call the changeimage() function. This changeimage() function changes the image from the mars rover with no laser to the image of the mars rover with the laser. The script for this function is shown below in the Javascript code.

Javascript Code

The script for the changeimage() function is:

<script>
function changeimage()
{
document.getElementById("image").src="/images/mars-rover-laser.png";
}
</script>

This script takes the image with an id of image and changes the src attribute so that the image changes from the mars rover with no laser to the mars rover image with the laser.

---

Second Example

A second example of the use of a onmouseout event handler is shown below, this time with a link.

When a user scrolls over the link with his or her mouse cursor and then moves the cursor away from the link, it creates an alert pop-up box stating that the user has scrolled over the link and then moved the cursor away.

Scroll over this link and then move the cursor away

You can see again the use of the onmouseout event handler. When an element is scrolled over with a mouse cursor and the cursor is moved away, this event handler is triggered, and we can program it so that it can do anything. In this case, it creates a pop-up alert box.

Code

The code to create the link above with its onmouseout effect is:

<a href="http://www.learningaboutelectronics.com" onmouseout="alert(''You scrolled over the link and then moved the cursor away')"> Scroll over this link and then move the cursor away

Since a pop-up alert box is created when you scroll out the link, it is pretty much impossible to actually click through to get to where the link is trying to redirect you. Therefore, it isn't a very practical example, just used for demonstration purposes.

---

Best, Most Practical and Used Example

Even though both of these examples above show the onmouseout event handler in action, its best purpose is for an example such as the following, shown below.

We return back to the image above of the rover, but now we add an onmouseout event handler so that it reverts to its orignal image when the cursor is not on.

This is more likely the more often used function of the onmouseout event handler. It can revert back to the original image, link, paragraph, etc. that was present before the onmouseover event handler was used.

HTML Code

The HTML code of the <img></img> is:

<img src="/images/mars-rover-no-laser.png"
alt="Mars exploration"
id="image2"
onmouseover="changeimage2()"
onmouseout="changeimageback()">

This HTML code above has an id attribute of image2 and it has 2 event handlers, b>onmouseover and onmouseout. The onmouseover event handler calls the changeimage2() function, which changes the image to the rover with the laser when the mouse cursor is moved over the image. The onmouseout event handler changes the image back to the original rover without the laser, when the cursor is moved away from the image area.

Javascript Code

The Javascript code for the changeimage2()" and the changeimageback() event handlers are given below:

<script>
function changeimage2()
{
document.getElementById("image2").src="/images/mars-rover-laser.png";
}

function changeimageback()
{
document.getElementById("image2").src="/images/mars-rover-no-laser.png";
}
</script>

The changeimage2() function changes the image by accessing it by the id attribute, which in this case is image2. We then change the src attribute of the image to the rover image with the infrared laser beam.

The changeimageback() function changes the image again by accessing it by the id attribute. It changes the src attribute back to the original image without the infrared laser beam.

Related Resources

Javascript- Onload Event Handler

Javascript- Onunload Event Handler

Javascript- Onfocus Event Handler

Javascript- Onblur Event Handler

Javascript- Onclick Event Handler

Javascript- Onchange Event Handler

Javascript- Onkeydown Event Handler

Javascript- Onkeyup Event Handler

Javascript- Onmouseover Event Handler

Javascript- Onmousedown Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onreset Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler