Tutorial: Creating Image Maps

  1. Open the web page where the image map is going to be placed in.

    2. Open the web page

  2. Then open the image that is going to be used as the image map. On the menu bar, click Insert, and then click Image.

    3. Insert image

  3. At the Image Tag Accessibility Attributes window, the Alternate text: option, type in a short description of the image
    or call it Image Map. The reason for this is when someone with a browser that doesn’t show images can see what this image
    place holder would be if the image appeared.

    4. Image Tag Accessibiblity Attributes

  4. Head to the bottom of the screen to the Property Inspector. Go to the ID option and give a name to the image.

    5. Property Inspector ID

  5. Then go to the Map option and give a name to the link mapping of the image map.

    6. Map option

  6. Underneath the Map option there are some tools. Starting from the left is the Selection, Rectangle, Circle, and Polygon tools.
    Rectangle, Circle, and Polygon tools let you select the area you want to make linkable. The Selection tool is used to select
    the area that is already linkable in case you need to change any of the settings.

    7. Selection, Rectangle, Circle, and Polygon tools

  7. When choosing an area to be linkable, the area will have a light blue color over it. This highlighting lets you view the
    linkable area so it’ll be easier to use the Selection tool.

    8. Light blue highlighted area

  8. When the highlighted light blue area is selected, the Property Inspector changes as below. The Link option is to add the link
    URL address you want for this clickable area. In the Alt option you can add the text you want to appear when someone mouse
    over the linkable area.

    9. Property Inspector Link and Alt

  9. Repeat steps 6-8 to get other areas on the image to be linkable.