Javascript

OnMouseOver

Javascript & Objects | OnLoad & OnUnLoad | OnMouseOver | Math & Forms | The Date Object | Opening New Browser Windows | Javascript Caveats

The following examples illustrate using Javascript to cause an action when a mouse is placed over selected text or a region of an image map.

Example of OnMouseOver for Link Text

Put your mouse here and look at the status bar.

This is produced by using the following link (the Javascript is displayed in red):

  <A HREF=""  
   onMouseOver="window.status='Hello, how are you?';  
   return true;">here</A>  

Notes:

1. The value of onMouseOver= specifies the action to be performed when the mouse is placed over the link; in this case, the message "Hello, how are you" is displayed. Note that the message is placed in single quotes and is part of the material in double quotes used to delimit the value assigned to onMouseOver
2. window.status causes the message to be displayed on the browser status bar (below the main window).
3. This is an example of Javascript code that does not need to be placed within a <script> tag

Example of OnMouseOver for Image Maps

The following is an image map with 4 areas marked. Each area (labeled 1-4) is a link that can be accessed by clicking in the area. In addition, each time the mouse enters one of the 4 areas this page changes in an interesting way (try and see).

The code used to insert and activate this image map is below.

 
 

 <center> 
 <img src="map.gif" usemap="#mymap" border=0> 
    <MAP NAME="mymap"> 
    <AREA NAME="Area1" COORDS="0,0,102,54" 
    HREF="mylink1.html" 
    onMouseOver="document.bgColor='#000000'; 
     document.fgColor='#FFFFFF'"> 
    <AREA NAME="Area2" COORDS="102,0,195,54" 
    HREF="mylink2.html" 
    onMouseOver="document.bgColor='#FFFF00'"> 
    <AREA NAME="Area3" COORDS="195,0,288,54" 
    HREF="mylink3.html" 
    onMouseOver="document.bgColor='#00FF00'"> 
    <AREA NAME="Area4" COORDS="288,0,396,54" 
    HREF="mylink4.html" 
    onMouseOver="document.bgColor='#FFFFFF'; 
     document.fgColor='#000000'"> 
    </MAP> 
 </center>          
 

Notes:

1. The <MAP> tag creates a client-side image map (the tag itself is just HTML, not Javascript, but some Javascript elements, marked in red, have been added to this particular <MAP> tag).
2. <AREA> specfies a separate region in the image map. <COORDS> give the (x,y) coordinates within the image of the upper left and bottom right corners of the region.
3. onMouseOver causes something to happen when the mouse is moved over some element on a page. In the present case document.bgColor sets a different page background color when the mouse is moved over each of the four areas of the image map. Moving the mouse over the first and last areas in the image map may (depending on your browser) also change the foreground (text) color.

An alternative and a gripe:

Another interesting use of onMouseOver with an image map can be to play a different sound when the cursor is placed over different parts of the map. (In fact, we first wrote the above example to do just that.) Unfortunately, some browsers are now configured by default to play sounds with plug-ins that handle matters in an extremely awkward way (although the plug-in folks probably would argue differently).

Rather than simply playing the sound and getting on with life, these plug-ins insist on replacing the page that loads the sound file with a new page that shows nothing but some sort of custom control gadget for manipulating the sound file. Ok, it might be nice to have some gizmo present so you can replay a sound file once you've downloaded it, but it's a real pain when the page with the gizmo has displaced the original page that loaded the sound in the first place. Then you can no longer see the content that the sound was supposed to accompany. Worse, the situation can be a real nightmare if the original page had an onLoad command to play the sound. Then you can get into a situation in which you can never see the page that the sound is supposed to accompany.

If you click on the above image map, it will take you to another page that has the following return link to the page you are now on:

 
 
 <a href="javascript:history.back()">Return</a> 

This uses the back() method of Javascript's history object. By adding the "protocol" javascript, you can treat the back() method like a URL. But since clicking the link causes a piece of Javascript code to be executed, rather than a file to be loaded, this use of the javascript protocol is often referred to as a pseudo-URL. (We'll see and use a lot more examples of the javascript pseudo-URL a little later.)