line
Setting multiple links on a single image
line

The section "Setting a link on an image" explains how to set a single link on an image. This section explains how to divide a image into several areas and set links on them. An image that have multiple links is called an image map or a clickable map.

This section contains the following topics:

HTML tags <IMG SRC= USEMAP= >
<MAP NAME= ></MAP>
<AREA ALT= COORDS= HREF= SHAPE= >


Note Note This section introduces the simple flow for the image map creation. If you want to learn more about image maps, click an image using the right mouse button, select Edit Image Map from the pop-up menu, and click the Help button. A help topic is then displayed, where you can read a detailed explanation.



Opening the Image Map Editor

To open an editor to create an image map:

  1. Click the target image using the right mouse button, and select Edit Image Map from the pop-up menu to open the Image Map Editor.

    Image Map Editor


Setting links on multiple areas

You can create areas whose shapes are rectangular, circular or polygonal and then set links to them.

  1. Click the Rectangular icon icon in the Image Map Editor.

  2. Drag on the image displayed in the editor, from the upper left corner to the lower right corner, to create a rectangular area. When you release the mouse button, the area is determined, and the Attribute dialog box for a link is displayed.

    Selected area and Attributes dialog box

    Tip Tip To create a circular area, click the Circular icon icon and drag the image.

    To create a polygonal area, click the Polygonal icon icon, click the image multiple times to make the angular points of the polygon, and double-click the last angular point to finish.

  3. Specify the link destination (refer to "Setting a link on text"), and click the OK button to add the area to the image map.

  4. Click the down-arrow button in the Image Map Editor to display a list of the specified areas.

  5. Type a comment for the area next to Alternate Text.

    Entering alternate text

    Note Note Alternate text is necessary for those who use Web browsers that cannot display images to jump the link destination. Be sure to enter alternate text for each area.

  6. Repeat the preceding steps to create multiple areas that have links to the different destinations.

    Multiple areas and a list on the editor
Tip Tip To change a link destination, click an area in the image displayed in the Image Map Editor, click the Edit icon icon to display the Attribute dialog box for a link, and change the destination.


Tip Tip To cancel a link, click an area in the image displayed in the Image Map Editor, and click the Delete icon icon to delete the area and to cancel a link.



Saving an image map

You can save an image map (the entire image including areas you created) in one of the following formats: client side image map (CSIM) or server side image map (NCSA or CERN). To save an image map in the CSIM format, which is easy to manage:

Note Note You do not have to specify a URL for the Default area. However, you must specify URLs for the other areas; otherwise, you cannot save an image map.


  1. Select CSIM from the upper right box in the Image Map Editor.

  2. Check that a map name (a file name for the image map, which you can change if necessary) is specified in the Map box.

    Image Editor just before saving

  3. Click the OK button to save the image map.

Vocabulary Vocabulary client side image map

An image map that is processed on the client (Web browser) side. Because HTML tags for this image map are embedded in an HTML file, you can easily use and manage this image map.


Vocabulary Vocabulary Server side image map

An image map that is processed on the server (your provider's server) side. To use this image map, you must create an image map file in addition to an HTML file. There are two types of server side image maps; NCSA and CERN, depending on the application that the server uses. To save an image map in one of these formats, select NCSA or CERN from the upper right box in the Image Map Editor.