ImageMap - Mapedit Tutorial
ImageMaps turn a simple graphic into a complex navigational system. In the last lesson you learned how to link a graphic so that when a user clicked on an image they were taken to another Web page. In this lesson you will be able to create several "hot spots" on an image. Each "hot spot" will take you to a different Web page.

ImageMap code adds quite a bit of extra code to the basic <IMG> tag.

First the USEMAP attribute is inserted into the tag.

Next a value is assigned to the USEMAP attribute. The value identifies a <MAP> tag located somewhere on the Web page.

The majority of ImageMap code is contained between opening and closing <MAP> tags. To identify the hot spots on an image, and declare where this hot spot links we use the <AREA> tags.

ImageMap code is fairly complex, however once you see a few examples of ImageMap code you will begin to make sense of all these new tags. You may be wondering how these "hot spots" are defined. The X and Y coordinates of the link are declared within the <AREA> tag.

The X and Y coordinates are 00 for X and 00 for Y in the upper left corner of the image. If you use a graphic program like Photoshop, the info palette will give you the X and Y coordinates when your mouse is over any area of the image. These numbers are based on pixels.

Click to see ImageMap code and an ImageMap. This should open in a new window (may not in some browsers). You can keep both browser windows open at the same time to make it easier to go through these instructions.

As you view all this code you may become a bit nervous about how all these numbers are generated. There is some good news. You do not need to manually create the X and Y coordinates, for an ImageMap, there are several software programs which create this code for you. These instructions are for Mapedit.

Where to get Mapedit
You can download Mapedit from the download site: http://www.boutell.com/Mapedit. Or you can use Mapedit for Mac and PCsin the JC labs. You can also use any other ImageMap-capable programs you want to make the ImageMap.

Other places to find Mapedit for free or a trial version are:
CNET Shareware. Type in Mapedit in the search field. Hit the go button. It takes you to a download page where you have choices.
zdnet.com/downloads. Type in Mapedit in the search field. Hit the go button. It takes you to a download page where you have choices.

After downloading, PC users will need to unzip the file. Macintosh users can expand the file with Stuffit Expander.

Mapedit is an extremely simple program with only one function, to create ImageMaps. You cannot use this software to create original art work or convert images to the gif or jpeg format.

Before you launch Mapedit you must select the image you want to use as an ImageMap and place an image tag into an html document which will display the image.

On the sample page I have an HTML document named imagemap.html. I have included the code to display the leaf image I created in Photoshop. This is a simple image tag. Do not add any linking code, or ImageMap tags. That will be done by Mapedit.

------ code snippet from "imagemap.html" file ---------

< img src="leaf.jpg" > It is good to add the size attributes if you have them.

------ end code snippet

After saving the file and viewing it in the browser to make sure it displays I am ready to use Mapedit. I launch Mapedit and go to the file menu and select open.

I locate the imagemap.html file and select the "open" button. This window appears which lists all the images which are included in this particular web page. I see leaf.jpg so I click on the file name to select this image.

Map edit locates that image and displays it on the screen.

There are 3 tools I can use to define the ImageMap hot spots. The rectangle, circle and polygon. All these tools are located near the top of the screen for the older version (shown below) or on the upper left for a newer version.

The current version you can download comes with the as-you-use instructions in a small window right on the face of the program. If you don't have that version, below are more instructions to help you with it.
Begin with the rectangle tool. click in the upper left hand corner and then drag the mouse to the lower right hand corner where you again click.

This dialog box displays. You need to enter the location of the link you want this rectangular area to take the visitor to. In my example, I have them all the links go to my color.html page, which is not in the same folder as this .html page. So I typed in ../color.html. this tells the browser to back out of this folder and go to the color.html page.

The second field below the URL field, you can type in alt pop out text. This will display a light yellow box with the text you entered when the mouse is over the hotspot. This may only work in Internet Explorer on a PC.

The third field in the dialog box is for the target attribute. This would be useful if your site contained frames.

Finally there are 2 areas where onmouseout and onmouseover values can be entered. If you do not have enough javascript knowledge to enter values in these areas, leave them blank and select the OK button.

You have now created a hot spot for this image. A visitor to your Web site will be able to link to the page or place (such as when using jump links) when they click their mouse on this area.

Repeat these steps again, select another area and fill in the dialogue nox with other URLs or email addresses.

There are also the circle and polygon tools.
The circle tool: Select the circle tool and click into the middle of where you want the center of the circle to go. Then drag the mouse out and the circle expands. When you click again the circle is established and the dialogue box appears letting you fill in the URL.

The polygon tool: Click on the spots you want the hot spot to enclose. this is useful for an odd-shaped object and you can follow its shape around. When you reach the end, select the control or command key and click which allows the polygon to connect with the starting point. Once again, fill in the URL in the dialogue box.

After creating rectangles, a circle and polygon hot spots, you are ready to access the file menu and select save. This causes Mapedit to write ImageMap code directly into your html document. This dialog bog appears that states your document has been saved. Select OK and quit Mapedit.

The img tag now has the usemap attribute and the value it was assigned. In the example, because the name of the image is leaf, the value is #leaf_Map. Your code will reflect the name of your graphic. You may have a hard time finding the portion of the code which defines the map look at the bottom of the page. Mapedit puts the new code at the bottom.

The opening and closing map tags are inserted. The map is named leaf_Map. The underscore and word Map is not needed in the value name. It is something ImageReady does, the program I used. As long as the two names MATCH, it will work.

There are several area tags below. The shape attribute can have one of three values assigned to it: shape=rect for rectangle, shape=circle and shape=poly for polygon. Next comes the coords attributes and numerical values. When creating a rectangle the first 2 numbers are the x and y coordinates for the upper left corner and the last 2 numbers are the x and y coordinates for the lower right corner.

When defining a circle the first 2 numbers indicate the x and y coordinates of the center of the circle and the last # represents the radius.

The numbers assigned to the polygon represents X and Y coordinates for each a polygon corner.

At the end of the area tag, a familiar attribute appears, the one which allows us to identify the link location. In my example, they all say href="../color.html". Remember, your hot spots can go to any page, on any site and email addresses, too (which will prompt someone's email program to open an email window with the email address you filled in).

The closing map tag will end the ImageMap code. Now test out the page. Open your file in a browser and click on the areas you designated. You need to be online if any of the URLs are absolute (going to a page you do not have on your harddrive or disk).