JavaScript: onMouseOver, Image Swaps

 

onMouseOver

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.

 

Example

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

<a href="http://yahoo.com" 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


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

<td>

<a href="javascript:location=http://www.kilroywashere.com/sarah/main.htm" 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>

<br><center>1967</center>

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

<br><center>2000</center>
</table>

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':

onMouseOver="document.bones1.src='bones1.jpg'"

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

onMouseOut="document.bones1.src='bones1txt.jpg'"

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
onMouseOver www.htmlgoodies.com/primers/jsp/article.php/3478451
onUnLoad and 'onMouseOut' www.htmlgoodies.com/primers/jsp/article.php/3478221
Image Flip Using 'onMouseOver' www.htmlgoodies.com/primers/jsp/article.php/3478271
Image Swaps (WEB Developer) www.webdeveloper.com/javascript/javascript_switching_images.html

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

 

Exercise

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

If you work on eEverything.com, 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 eEverything.com, you can swap these two images: 'vcr1.gif' and 'vcr2.gif'. (vcr1.gif I created in PhotoImpact, vcr2.gif I took from jandr.com.) Both files are in the folder: uzza.us/cs/web/.

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