Creating an image map

You can place several different hyperlinks on a single image. You do this by drawing hot zones on the image, each hot zone linking to a different URL. A collection of hot zones is called an image map. For example, the image below has an image map with five hot zones, one for each continent. Clicking each zone will take the user to a different Web page. (Normally, the lines demarcating hot zones are invisible, but they have been made visible in this example.)

Namo Web Editor 4.hyperlink.imagemap.1 Creating an image map

An image map

Namo WebEditor lets you create hot zones by simply drawing them with the mouse. Hot zones can be rectangular, circular, or polygonal with any number of sides.

To create an image map
  1. Select the image you want to create an image map on.
  2. Click the Image tab on the top of the program.
  3. On the Layout menu, move to Image Map, and then click any of the following menu:
    • Draw Rectangular
    • Draw Circular Hot Zone
    • Draw Polygonal Hot Zone
  4. Draw a rectangle, circle, or polygon covering an area of the image that you want to make a link. (For a polygonal hot zone, click each point where you want to place a vertex, and then double-click the last point to close the polygon.) When you are finished drawing the hot zone, the Create Hyperlink dialog box will appear.
  5. Enter the desired URL for the hot zone and specify any other properties you want for the hyperlink, and then click OK.
  6. Repeat steps 2 – 4 for each area of the image you want to make a link.
  7. When you are finished drawing hot zones, press Esc to exit hot zone drawing mode.

Namo Web Editor icon tip Creating an image mapYou can use the same steps above to add a hot zone to an existing image map.

To move a hot zone
  1. Click an image that has an image map.
  2. Drag the desired hot zone to the desired location. (The mouse pointer will turn into the shape of a hand when it is over a hot zone.)
To resize or reshape a hot zone
  1. Click an image that has an image map.
  2. Click the desired hot zone. Resize handles will appear at the hot zone’s corners or vertices. (For a circular hot zone, resize handles will appear at the corners of the circle’s bounding box.)
  3. Drag resize handles as necessary to change the hot zone’s size and/or shape.
To change the URL or other properties of a hot zone
  1. Click an image that has an image map.
  2. Double-click the desired hot zone. The Hyperlink Properties dialog box will appear.
  3. Edit the link properties as desired, and then click OK.
To remove a hot zone
  1. Click an image that has an image map.
  2. Click the desired hot zone and press Delete. (Note: you may need to click on another part of the image before the hot zone’s outline disappears.)

Creating an image map