JavaScript: onMouseOver, Image Swaps



You have seen the 'onMouseOver' command widely used on the Web. 'onMouseOver' allows some element(s) of a page to change when the user hovers over a given piece of text or an image. 'onMouseOver' is often used inside a link, to provide information about what clicking on the link will do. 'onMouseOver' is typically used alongside 'onMouseOut'. 'onMouseOut' is the opposite of 'onMouseOver'; it tells the browser what to do when the cursor is no longer hovering over a given piece of text or an image.



Let's do an example of using 'onMouseOver' to affect the page.

<a href="" onMouseOver="parent.location='Quick Boost.html'">Hover over me to get a quick boost to your self-esteem</a> </center> </body>

to see this how this script behaves in a new window.

The Javascript 'parent.location' refers to the current page. So the code "parent.location='Quick Boost.html'" causes the current page to switch to Quick Boost.html. It's a link for which it's not necessary to click.


Image Swaps (Rollovers)

'onMouseOver' and 'onMouseOut' can be used similarly to do an image swap or rollover. An image is present on the page, and when the viewer hovers over the image, a second image replaces the initial image. 'onMouseOver' accomplishes this. When the viewer moves the cursor away from the image, the initial image returns. 'onMouseOut' accomplishes this. An image swap is often done within a link, where the link either takes the viewer to another page or it runs a function.

Let's do an example that includes two image swaps. (I created the images that include text using PhotoImpact.)


Example 2

<table width=100% border=0>
<tr align=center>


<a href="javascript:location=" onMouseOver="document.bones1.src='bones1.jpg'" onMouseOut="document.bones1.src='bones1txt.jpg'">
<img src="bones1txt.jpg" name=bones1 width=134 height=150 border=0></a>


<a href="javascript:location=" onMouseOver="document.bones2.src='bones2.jpg'"
<img src="bones2txt.jpg" name=bones2 width=112 height=150 border=0></a>


to see this how this script behaves in a new window.

In the example above, in the first link note that the <IMG> object is given a name ('bones1'). Within the <IMG> tag, the image that is initially assigned to the object 'bones1' is 'bones1txt.jpg'. The name of the <IMG> object ('bones1') is then used inside the 'onMouseOver' and 'onMouseOut' commands. When the viewer hovers over the link, the image 'bones1.jpg' is assigned to the object 'bones1':


When the viewer stops hovering over the link, the image 'bones1txt.jpg' is again assigned to the object 'bones1':


You might notice that when you first put the cursor over each image, there is a delay. The browser is downloading the image that is needed at that time. In the next lesson we learn how to eliminate this delay.


Other Resources

Try these links on onMouseOver, 'onMouseOut' and Image Swaps:

Page Link
onUnLoad and 'onMouseOut'
Image Flip Using 'onMouseOver'
Image Swaps (WEB Developer)

or check out one of our reference books, or look for other help on the Web.



Work on either your own page or Use 'onMouseOver', as in the first example, to create a link that works when the user hovers over it.

If you work on, have the link be to "appliances.html," and the message that comes up when the user hovers over the link should say that all small appliances are 20% off for the next two weeks.

In addition, use 'onMouseOver' and 'onMouseOut' to swap two images within a link, so that a different image shows up when the user hovers over the link.

If you work on, you can swap these two images: 'vcr1.gif' and 'vcr2.gif'. (vcr1.gif I created in PhotoImpact, vcr2.gif I took from Both files are in the folder:

If you work on your own page, swap two other images.