JavaScript OnMouseout Event

This event handler is used to instruct the browser on What action to take when mouse cursor is moved away from an object on the page. It is generally used in combination with OnMouseover Event which we studied in the previos lesson.

If the concept of events is new to you, it is recommened that you first see lesson on What are Javascript events
Syntax

onmouseout="functionname( )"

The name of function that has to be called when this event occurs.
NOTE: Simple Js code can also be written here instead of calling function, but standard practice with events is to use them with functions.
Example

In this example, we have an image. When mouse is moved over the image, it will be replaced by another image (done using mouse over event). Now When the mouse moves out, it will replaced with yet another image- this part will be handled by the OnMouseOut event handler.

javascript image
Code Used and Explanation

JS mouse out event handler

    We have an image named 'js_image.jpg'. It has two event handlers. OnMouseover to replace it with one image when mouse is moved over it. And onmouseout event handler to change image back to the previos one when mouse is moved away from the image.
    We instructed in the attribute that when the onmouseout event activity is detected on this image, the browser should call the function called mouseoutlesson()
    We also assigned an ID to the element i.e. the image.

Now the Function explained

    We declared a function and named it 'mouseoutlesson'
    What that function does is, it locates the element having the ID 'samp'
    With the element located, it finds its attribute 'src' and changes its value back to 'images/js_image.jpg"

Note-The value of this attribute when the page loaded was 'images/js_image.jpg'. On mouse over, a function is executed, the value changes and thus a different image appears on the page. On Mouse OUt, another function is called and the value again changes as we instructed in the function.