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.
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="#example1_map" ALT="diagram for Client-Side imagemap example 1">
<map name="example1_map">
<area shape=circ coords="50,50,50" HREF="./circle_1.html" ALT="The mouse is over the Circle, Red.">
<area shape=rect coords="100,0,199,50" HREF="./rect_1.html" ALT="The mouse is over the Rectangle, Green.">
<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.">
<area shape=rect coords="0,0,199,199" HREF="./default_1.html" ALT="The mouse is over the default area, Yellow.">
</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). Once you "click", the Client sends the URL request to the host.



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