In this Client-Side image mapping example, a very simple diagram is used to help the user understand what to expect on clicking the mouse over part of the diagram.
This example 2 differs from example 1 with the addition of a text box describing the region the mouse is hovering over.
The basic built in shapes are used and on the diagram appear in different colors. The diagram is 200 pixels wide by 200 pixels high. In this case the map file information is sent to the client within the HTML document. The HTML code is shown below:

<IMG SRC="./map_test_1.png" USEMAP="#example2_map" ALT="diagram for Client-Side imagemap example 2">
<map name="example2_map">
<area shape=circ coords="50,50,50" HREF="./circle_1.html" ALT="The mouse is over the Circle, Red." TITLE="The mouse is over the Red Circle">
<area shape=rect coords="100,0,199,50" HREF="./rect_1.html" ALT="The mouse is over the Rectangle, Green." TITLE="The mouse is over the Green Rectangle">
<area shape=poly coords="199,199,150,199,100,150,100,100,150,100,150,150,199,150,199,199" HREF="./poly_1.html" ALT="The mouse is over the Polynomial, Blue." TITLE="The mouse is over the Blue Ploymonial">
<area shape=rect coords="0,0,199,199" HREF="./default_1.html" ALT="The mouse is over the default area, Yellow." TITLE="The mouse is over the Yellow Default, Background, area">
</map>

Notice that the default area is defined as a rectangle covering the entire diagram. Unlike the Server-Side map file syntax, there is no "default" definition for Client-Side mapping. Overalpping areas are decided by which area occurs first in the list, thus allowing for a default link (if desired) by placing an overview area last.

As you move the mouse over the diagram notice the URL the Client is going to request change on the status line (on some browsers). Also notice a descriptive text box with the contents of the "Title" attribute. Once you "click", the Client sends the URL request to the host.



See also Server-Side image mapping example 1 or Client-Side image mapping example 1 or this page's parent page.