Make an Image Map

Now that you're a pro at basic Web design, add some more advanced HTML to put some "wow" in your site.

This is where image maps come in. You've probably heard the term tossed about, and most Web surfer have probably clicked on one. Image maps are images with an attached map that points out certain hot spots-- or clickable areas.

So how do these image maps work?

Your image is placed in your document as any other image would be. The image tag then references a map, or list of coordinates. These coordinates tell the browser that when the mouse clicks on one of the areas specified, the viewer will be taken to another page. It sounds a bit tricky, but many of the elements that make up an image map are familiar bits of code.

Making your own map is simple, but simpler yet is shareware. We checked out a few programs that make image maps for you. All you need to do is import your image, draw little shapes around the spots that you want to link from, and assign them URLs. The program then generates the HTML for you, and you just paste the code into your existing website.

CoffeCup Image Mapper++ is one of the best programs we found. It's easy to use and you can see the HTML being generated as you make your map. Read on for a quick tutorial in CoffeeCup's Image Mapper++, find out which program to get for your Mac, and see an image map's code in case you want to tackle an image map on your own.

Using CoffeeCup's Image Mapper++

Download CoffeeCup's Image Mapper++ from the ZDNet Software Library. It's free to try, but costs $20 if you want to continue using it. Once the program is installed, open the image you want to map using the Map Wizard.

Go to File, Map Wizard.
Select Create a new map and press Next.
Enter the file name or browse to locate the image you would like to open.
You will then enter a name for your map. This is necessary as the image will need to reference the map by name. You may see that the Wizard has entered a name for you. Change this if you wish.
If you are using the image map on a page that is a frame, you will need enter the name of the frame in which you want the link opened. If it is to be opened in a new window, enter "new."
Click Next to finish. You will then see your opened image.

Now select certain areas of your image that you wish to be clickable. You can choose a rectangle, circle, or polygon as your selection method.

Select your shape of choice from the blue shapes at the top.
Click the starting and ending points of the shape.
Enter the URL that you wish to refer to. (This URL should contain the entire address including the http://. This way, your link is sure to find its way).
OnMouseOver Text is the text that shows up on the bottom bar of your browser. This is the place where the link's URL normally appears. You can also enter some text in the ALT tag area. This is the same idea, but instead of appearing at the bottom, your text appears as part of the cursor. This can be annoying as it covers part of your image. Both of these are optional.
Press Cool! to return to your image.
Finish making your selections.
When you are done, save your map.

Now test your map to see if it works. Either copy the HTML from the bottom window and paste it into your document or configure Image Mapper++ to test it in your browser. To do this, go to View, Options. Click the testing tab and browse to find your browser. When you are ready to test the map, click on the red and yellow circle on the right side of the tool bar. Your map will show up in your browser.

ImageMapper for the Mac

Stuart Snaddon's ImageMapper for the Mac has so many tools and gadgets it might look confusing. But eliminate all the extras and you have all you need to create quick and easy image maps.

Open ImageMapper.
Choose File, Open Graphic.
A number of floating palettes should be open, one of which should say Toolbar. If you don't see this palette, go to Window and select Toolbar.
Click the Draw tab and choose a shape for selecting the areas you want to be clickable.
Click on the shape you have drawn. In the URL tab of the Object Editor window (this window is also found under the Windows menu) enter the URL you would like this area to point to. You will see that you can choose what sort of link it will be. Most likely, you will choose WWW as it is for regular Web addresses.
If you want to enter an ALT tag, that can be done in the Tags tab.
Once all of your areas are selected and the URLs entered, choose Image, Generate ImageMap.
Select Client-Side HTML and press Compile.
In the Parameters section, give your map a name and press Generate.
The HTML for your map will appear on a new page. Copy everything starting with the <MAP> tag to the </MAP> tag and paste it into your document.

You will notice that there are a lot of extra goodies in ImageMapper. Try playing around with some of the features to see what else it can do.

Demystifying the HTML

Dog illustration Looking at the HTML for an image map can be scary. There are tons of numbers and commas. Uless you understand what everything stands for, it might as well be a foreign language. And in a way, it is.

First take a look at the image to the right for the Doggie Fashion site. The site assumes that viewers just "know" that they can click on the clothes the pooches are sporting. Clicking on the hat will take them to the hat page, the collar to the collar page etc. (This image is not actually mapped as the Doggie Fashion page does not exist).

Here is the code:

</MAP>

The first line is the image tag where SRC is the image file name and USEMAP tells the browser to use the coordinates in the map called #doggie_collage.

The <MAP> and </MAP> tags contain the coordinates for the entire map. The first tag contains NAME="doggie_collage" so that it can be referred to by the above <IMG> tag. The HREF defines the URL that the link will point to.

Next are the coordinates. This is the main reason for using an image mapping program. Getting the coordinates for an image map can be tricky. Here are the basic rules:

Each section of the map begins with an <AREA> tag.
The shape must be defined as RECT (rectangle), POLY (multi-sided area), or CIRCLE.
COORDS are the coordinates of your shape.
- Rectangles are determined by the upper left point and the lower right. So the collar's coordinates are "12,117 69,134" with the first two numbers being the upper left and the second two, the bottom right.
- Circles have three numbers. The first two are the coordinates for the mid-point and the third is the length of the radius.
- Polygons are the most confusing of all. They consist of a series of coordinates for each point beginning with the first and continuing around the shape. Make sure you pay attention when you write these numbers dows.

So how do you get all these numbers? Many image editing programs will show you the x and y coordinates as you move the selection tool across the image. Simply place the cursor in each position and write down the numbers. Since this can be a long procedure, you may want to use squares or rectangles instead of polygons.

Then again, you will most likely decide the process is just not worth it and use a program that does the work for you. At least now you understand what, exactly, the program is doing.