Useractive Tutorial

Image Maps - HTML Lab 8

Learn to Make Client-Side Image Maps

An image map is a graphic that can be divided into multiple areas. Each area of the map can point to a different URL. Here is an example of an image map. Click on the areas labeled CLOSE UP to see the image map in action.

Cool, huh?!? Let's take a look at how this was done.
In HTML mode, type the following into the Editor below:
<head>
<title>
Image Maps
</title>
</head>

<body bgcolor=white>

<IMG SRC="http://www.useractive.com/imagemap/World.gif" USEMAP="#World" border=0 ALT="World Map is here"> 

<MAP NAME="World">
<AREA SHAPE="RECT" COORDS="38,49,157,127" HREF="http://www.useractive.com/imagemap/USA.html">
<AREA SHAPE="RECT" COORDS="233,14,317,91" HREF="http://www.useractive.com/imagemap/Europe.html">
<AREA SHAPE="RECT" COORDS="480,58,522,105" HREF="http://www.useractive.com/imagemap/Japan.html">
</MAP>

</body>
Click PREVIEW.

An image map has two main parts - an image and a map.

The image is defined using a standard IMG tag with one exception. You must use a USEMAP attribute. This attribute specifies that the image is a client-side image map and indicates which MAP tag defines the mapping for this image. In this case, the map named World will be used because the value of USEMAP is set equal to #World. A # must be used before the name, and the name must be exactly the same as the name given to the map. Capitalization is important.

The map is defined using a MAP tag. As you just learned, you must name the map using the NAME attribute. The clickable areas of the map are then defined using the AREA tag. You must include three attributes with this tag.

The SHAPE attribute is used to specify the shape of the area on which you can click. There are three possible shapes -- rectangle, circle, and polygon. We will use create each type of shape in this lesson, but let's focus on rectangle (RECT) for now.

The COORDS attribute specifies the coordinates of the shape. A rectangle requires four numbers separated by commas. The first two numbers are the coordinates of the upper left corner of the rectangle, and the last two numbers are the coordinates of the lower right corner.

The HREF attribute declares the URL that will be visited when the area is clicked.

Here is an example to help you better visualize these concepts.

Put your mouse directly over the upper left corner of the red rectangle. Then, look at the bottom of the browser window and you'll see a line that reads

coords?38,49

Those are the coordinates for the upper left corner of the rectangle.

NOTE: If you are using Netscape on a Mac, you CANNOT use this trick to display the coordinates in the status bar. You must download the image to your computer, open it in a graphics editor, then get the coordinates. This is the best solution to the problem.

Let's make it so that when you click on South America, you are taken to http://www.useractive.com/imagemap/southamerica.html.
In HTML mode, type the following into the Editor below:
<head>
<title>
Image Maps
</title>
</head>

<body bgcolor=white>

<a href="coords"><IMG SRC="http://www.useractive.com/imagemap/World.gif" ISMAP border=0></a>

</body>
Click PREVIEW. You should see the map we have been using throughout the lesson. If you move your mouse over this map, you should see the coordinates of the cursor displayed at the bottom of the browser window. Notice that the upper left corner of the image has coords?0,0. The coordinates of the upper left corner of the image will always be 0,0.

Now you must decide where to put your "imaginary" rectangle so that when you click on South America, you go to a page that has something to do with South America. The imaginary rectangle below would work!

As it says, position your mouse at the upper left corner of the rectangle, then look at the bottom of the window and write down the cooridinates. Do the same thing for the lower right corner. For example, when I tried it, I wrote down 96,142 for the upper left corner and 194,307 for the lower right corner (your numbers may be slightly different).

Now that you know the coordinates of both corners you should add the code to the image map so that if you click inside the rectangle you are taken http://www.useractive.com/imagemap/southamerica.html.
RECT, CIRCLE, and POLY

There are three possible shapes that can be used as the clickable areas of your image map. We can create all of the shapes pictured below:

Try clicking on the different shapes to see that it works.

Observe the code used to create this image map:

<IMG SRC="http://www.useractive.com/imagemap/shapes.gif" USEMAP="#shapes">

<MAP NAME="shapes">

<AREA SHAPE="RECT" COORDS="19,11,100,47" HREF="http://www.useractive.com/rect.html">
<AREA SHAPE="CIRCLE" COORDS="151,39,30" HREF="http://www.useractive.com/circle.html">
<AREA SHAPE="POLY" COORDS="49,50,80,73,69,107,29,107,15,73" HREF="http://www.useractive.com/poly.html">
<AREA SHAPE="RECT" COORDS="92,78,190,98" HREF="http://www.useractive.com/rect2.html">
<AREA SHAPE="RECT" COORDS="0,0,201,113" HREF="http://www.useractive.com/default.html">

</MAP>

Notice that the four red shapes are defined first. The last area defines the yellow background of the image. This is so that the red shapes will overlap the yellow background. Remember that if you have overlapping areas, the one that is defined first takes precedent or overlaps the one defined last.

By now you should be familiar with how to define rectangular areas. Let's discuss the other two areas that can be used.

A circle is defined by setting the SHAPE attribute equal to CIRCLE. Three numbers are used to specify the size of the circle. The first numbers give the coordinates of the center of the circle. The third number gives the radius of the circle, which is the distance from the center of the circle to its edge.

A polygon is defined by setting the SHAPE attribute equal to POLY. You can specify a polygon of up to 100 sides. To define the shape, the coordinates of each point where two sides meet are listed.

Now that you know a little more about image maps, you should practice creating your own map. Here is an image you can use to do this:

http://www.useractive.com/imgmap.gif

See if you can make an image map that will send your visitors to different pages depending on which shape is selected.