Status Line Messages with Image Maps

Illustration of an Image Map You Are On The Rectangle You Are On The Circle You Are On The Polygon

 

<script type="text/javascript">

var rectangle = 'You Are On The Rectangle';
var circle = 'You Are On The Circle';
var polygon = 'You Are On The Polygon';

</script>

<IMG SRC="images/imagemap.gif USEMAP="#map" ALT="Illustration of an Image Map">

<MAP NAME="map">
    <AREA
       SHAPE="rect"
       HREF="index.htm"
       COORDS="53,85,163,180"
       onMouseOver="document.getElementById('mo').innerHTML=rectangle; window.status=rectangle; return true;"
  
    onMouseOut="document.getElementById('mo').innerHTML='&nbsp;'; window.status='';"
       TITLE=
'You Are On The Rectangle'
       ALT='You Are On The Rectangle'
    >
    <AREA
       SHAPE="circle"
       HREF="index.htm"
       COORDS="272,133,41"
       onMouseOver="document.getElementById('mo').innerHTML=circle; window.status=circle; return true;"
    
  onMouseOut="document.getElementById('mo').innerHTML='&nbsp;'; window.status='';"
       TITLE=
'You Are On The Circle'
       ALT='You Are On The Circle'
    >
    <AREA
       SHAPE="polygon"
       HREF="index.htm"
       COORDS="366,111,418,87,473,139,473,172,400,172"
       onMouseOver="document.getElementById('mo').innerHTML=polygon; window.status=polygon; return true;"
    
  onMouseOut="document.getElementById('mo').innerHTML='&nbsp;'; window.status='' "       
       TITLE=
'You Are On The Polygon'
       ALT='You Are On The Polygon'
    >
</MAP>

As you move the mouse over the Rectangle (COORDS="53,85,163,180") you will get a message in the Status Line. This will also be the case when you move the mouse over the Circle or the Polygon.

TITLE="You Are On The Polygon" is used to display the tooltip message when the cursor is over the polygon.

SideBar - Whenever possible you should include an ALT tag with your Images.