This is an example of a client-side image map.

This is a simple 3 Button Menu Bar. Note what happens when the mouse passes over the left (1), middle (2), or right (3) button area. You should see the message bar (at Bottom of the Screen) indicate that you will go to the left page i.e Left.HTML when the mouse is over the left (1) button. Now click to convince yourself that it indeed does so!

What you observing is an example of a graphic image with Hot Spots (Zones) that are sensitive to the Location of the mouse and will cause a hyperlink to a URL location when the user clicks the mouse while over such a hot spot. The image maps the click to a URL; hence, the name, image map. There are two types of image maps i.e., Server side and Client side. The orignal image maps were server side and required the cooperation of a server, that is another computer that carries out services for a web site. The client side was developed later and allows us to determine the location of the hot spot and the URL with only those resources located on the user's computer and browser. This client side image map offers many advantages.

To create a client side image map requires the introduction of two new tags:the map tag and the area tag. The map tag defines the map's name and other attributes and contains the area tags. Each area tag defines the shape of the hot spot and the URL associated with it. The three button example involved three areas tags each with a rectangular shape the size of each button.

Note the image has its upper left point (x,y) = (0,0) and its lower right coordinate at (N-1, M-1) where the image width= N pixels and its HEIGHT= M pixels. In the three button example it is easy to determine the coordinates that are associated with each hot spot once we know the image's size. To specify a rectangular hot spot we define its shape =rect and give the rectangle's upper left and lower right coordinates. In the example the source image is 300x50 pixels.

Before going further, let us look at the code for the above simple example.

<PRE>

<P><!-- the Map is named menu and contains three rectangular hot spots -->

<MAP NAME="menu">

<!-- The area tag has two attributes Shape, in this example set to "RECT", and COORDS = (X-upper_left),(Y-upper_left),(X-Lower_right),(Y-lower_right) where the COORDS is a list of integers seperated by commas set off in quotes. Since the source gif (menu.gif) is 300 x 50, the left button (1) is one third the length. Hence, upper left is (0,0) and lower right is (100 -1, 50-1)= (99,49). HREF="left.html" tells that the click will link us to left.html located in this directory. -->

<AREA SHAPE="RECT" COORDS="0,0,99,49" HREF="left.html">

<AREA SHAPE="RECT" COORDS="100,0,200,49" HREF="middle.html">

<AREA SHAPE="RECT" COORDS="200,0,299,49" HREF="right.html">

</MAP>

<!-- Next we create an in-line image with source menu.gif and a USEMAP attribute = "#menu". The attribute USEMAP tells the browser to look for a client side map named menu. The # sign is necessary. -->

<IMG USEMAP="#menu" SRC="menu.gif" HEIGHT=50 WIDTH=300><BR>

</P>

</PRE>

• How does this technique work?
• <IMG>
• <MAP>
• <AREA>
• How do we create a map of Hot Spots within an Image?
• More examples
• An example that illustrates non-rectangular Hot Spots