June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
It is possible to execute JavaScript commands when the mouse pointer moves over the area, and also when the mouse pointer moves from the area to another part of the image.
An image changing when a mouse pointer moves over or away from it is called image rollover.
This feature can be used to create a number of different interaction effects. Examples of the kinds of actions performed when these events are detected include:
the status bar text can display information about the area the pointer is over
some other part of a page can be changed to display information (e.g. the contexts of a text box)
in a framed system, the page displayed in the frame can be changed without the user having to click
in a non-framed system the page (or image) displayed can be changed as the mouse moves over different areas
To set the status bar to display 'fresh green apples'. one could use the line:
<area shape="rect" cords="10,10,50,50" title="Apples"
onMouseOver="window.status='fresh green apples'; return true">
Remember to 'return true' when setting the status bar text.
The figure below illustrates the browser window when the mouse pointer is over the apples area:
To clear the status bar when the mouse pointer moves away from the apples area one could use the line:
<area shape="rect" cords="10,10,50,50" title="Apples"
onMouseOver="window.status='fresh green apples'; return true"
onMouseOut="window.status=''; return true">
Again, remember to 'return true' when setting the status bar text.
If we extend the on-line grocery example by adding a text box at the bottom of the page, we can set the text in this box using onMouseOver and onMouseOut events.
We add the text box by adding code for a very simple form:
<form name=myform>
<input type=text name=food_details size=50>
</form>
We can now add the following onMouseOver and onMouseOut actions:
onMouseOver="document.myform.food.value='Fresh green apples'"
onMouseOut="document.myform.food.value=''"
The screen looks as follows when the mouse is over the apples area:
