Javascript- Onmouseover Event Handler

The Onmouseover event handler in Javascript is an event handler that is triggered when a user places the cursor of a mouse over an element.

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

When the user places the cursor over an element, the onmouseover event handler will trigger, and will do whatever programmed to do.

As an example, look at the image below.

It is a rocket ship which hasn't yet taken off.

Now place the cursor of the mouse over this image. It will then show an image of a rocket ship that has launched.

Place your mouse cursor over this image to see it change

This is the power of the onmouseover event handler.

HTML Code

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

<img src="/images/rocket-before-takeoff.png"
id="image"
onmouseover="changeimage()">

The <img> tag must have an id attribute, which in this case is image. It also a onmouseover event handler attached to it. When triggered, this event handler will call the changeimage() function. This changeimage() function changes the image from the rocket before takeoff to the rocket after takeoff. 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/rocket-takeoff.png";
}
</script>

This script takes the image with an id of image and changes the src attribute so that the image changes from the rocket before takeoff to the image of the rocket after takeoff.

---

Second Example

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

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

Scroll over this link

You can see again the use of the onmouseover event handler. When an element is scrolled over with a mouse cursor, 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 onmouseover effect is:

<a href="http://www.learningaboutelectronics.com" onmouseover="alert('You scrolled over the link')">Scroll over this link</a>

Since a pop-up alert box is created when you scroll over the link, it is very difficult 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.

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- Onmousedown Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onmouseout Event Handler

Javascript- Onreset Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler