Image Maps in AOL Press

If you're not sure what an image map is, read a short introduction.

1. Start AOL Press. Create a new page or open an existing page.
2. Insert the image you want to make clickable using the Image button or by going to Element on the menu bar and choosing Image...
   
3. Use the Browse button to find your image file. After description, type in your ALTernate text. Leave Show Link Border checked for now. Click OK.
4. Select your image by dragging the mouse over it, like you would select text. It will appear in inverse colors when selected.
5. From Element on the menu bar, choose Image Map...
6. A new window opens, with your image in it. Using the rectangle, circle or polygon tool, draw an outline around the area you want to be a "hot spot." After you've drawn an outline, type the name of the file you want to link to from this area in the Location: box or use the Browse button to find the file.
7. Repeat until all areas have outlines and destination files in the Location box. If you make a mistake, select the outline with the arrow tool and hit delete, or click on the trash can button.
8. When you are done, click on the Close button. You will be prompted to save the image map. Uncheck the Sever Map File: checkbox. Click on Save.
   
9. You will pop back to your page. Click on the Show HTML button, or from Tools on the menu bar, choose Show HTML.
10. Find the image tag which is used for the image map. It will look something like this:
    <IMG SRC="classes.gif" WIDTH="144" HEIGHT="132" ALT="Interesting Courses" ISMAP USEMAP="#classes">
    Delete the ISMAP attribute from the image tag.
11. While still viewing the HTML, add the ALT attribute to each AREA tag. This alternate text should be the Title of the page people will get if they click on that area. These alternate texts are used by non-graphical browsers, so people without graphics can still use your image map.
12. Save your page.
13. If you don't want the border to show up on the graphic, telling people they can click on it, select the graphic again and click on the Image button or choose Image... from Element on the menu bar. Uncheck the Show Link Border box.
14. Create links in the text of the page that duplicate the links in the image map. This helps those with old browsers, non-graphical browsers, or special browsers.
15. That's it! Your finished product might look like this: