Multimedia WWW Series:
Image Maps: Client Side

What is an image map?

An image map is a graphic element which allows the user to click on certain "hot" areas which respond like normal hypertext links. They are created by supplying a picture, some hypertext links, and the coordinates of the clickable areas on the graphic. When the processing which determines what "hot" area is clicked on is done by the computer running the browser it is called a client side image map.

What you need to start:

• The graphic you wish to make into an image map. There are some samples below you are welcome to use.
• A utility for finding image map coordinates is very helpful, but not required.
• The html page where you wish to place the image map.

By the end of this session you will know:

• How to create an image map.
• How to find image map resources on the web.
• The html source to this document is a great way to get yourself started in creating your own HMTL

Samples

How To

There are 3 items necessary to get a functional image map. They are:

1. The image.
2. A MAP declaration.
3. An IMG SRC declaration which includes the USEMAP option.

The image can be of any type that a browser can handle, usually a JPEG or GIF. The image can be of any reasonable size. Full page-sized images are fine, as well as button sized images. Keep in mind that you are creating a user interface.

The MAP declaration

The MAP tag is symmetric, for every <MAP> there is an associated </MAP>. The syntax for this command is:

<map  name="mapname">
<area shape="rect" coords="left,top,right,bottom" href="somepage.html"></area>
<area shape="circle" coords="centerx,centery,radius" href="anotherpage.html></area>
<area shape="polygon" coords="x,y,x2,y2,x3,y3,...,xn,yn" href="yetanotherpage.html</area>
<area shape="default"  href="default.html"></area>
</map>

Notice that within the <MAP> tags there are several <AREA> statements. These statements tell the browser exactly which areas are clickable. Each statement includes the SHAPE, the COORDS(coordinates), and an HREF. The number of coordinates necessary is determined by the shape.

The 3 shapes available and their necessary coordinates are:

Shape	Coordinates	Description of Coordinates
Rectangle	always 4 coordinates	left,top,right,bottom
Circle	3 coordinates	center x, center y, and the radius. (Yes, the radius isn't strictly a coordinate)
Polygon	at least 3 pairs of coordinates	the polygon is defined by at least 3 vertices
Default	none	everwhere not previously defined

The IMG SRC declaration

This is a normal IMG SRC tag with the added USEMAP identifier.

<img usemap="#mapname" src="myimagegif">

The mapname is the same name that was assigned in the <MAP> statement defined above. The SRC is the image that was selected.

Exercise

Creating your own html file, map the following image to these addresses:

Object	Address to Map To
Circle	http://www.sp.uconn.edu/~mmlab/training/imagemaps/circle.html
Square	http://www.sp.uconn.edu/~mmlab/training/imagemaps/square.html
Triangle	http://www.sp.uconn.edu/~mmlab/training/imagemaps/triangle.html
Default	http://www.sp.uconn.edu/~mmlab/training/imagemaps/noshape.html

The image that needs to be mapped:
This is a 200 x 200 pixel image.

Remember, 3 parts are needed:an image, a MAP tag, and an IMG SRC tag.

Click here if you need help figuring coodinates Keep in mind the origin of this coordinate system is in the upper left. See the graphic to the right.
Click here to see the working map.
Click here to see the working sample code.