Creating Image Maps

Creating Maps
Adding Hotspots
Hyperlinking Hotspots
Practice

 

Creating hyperlinks to words and images is easy with the Property Inspector tool bar, but what if you have a larger image like a c-map that you would like to use to hyperlink to several other pages or documents? Image maps are not limited to rectangular areas - they can have other shapes that allow you to define irregular areas and place multiple links within one image.

To create an image map:

  1. Insert the desired image into the page.
  2. Select the image.
  3. In the Property Inspector, type a name for the hotspot you are about create in the Map text box.

Don't use spaces or special characters in the name. Each hotspot used must have its own unique name. If you don't see the Map text box, click on the expanded arrow at the bottom right of the inspector.

To create a hotspot:

  1. Property Inspector, select the desired hotspot tool: rectangular, circle, or polygonal.
  2. For rectangles or circle, use the crosshairs to position the hotspot and then click and drag the around an area of the image you want. If using the polygonal, each click creates a point. Each subsequent point is connected by a line to the previous point. Keep adding points until you get the shape you want. The size and exact positioning can be altered.
  3. A translucent blue-green area with handles appears around the area and the Property Inspector changes to Hotspot Properties.

To change the size or exact position of a hotspot:

  1. Select the Pointer hotspot tool. To resize the hotspot, drag a handle until the hotspot encompasses the desired area.. To move the hotspot, position the pointer inside the hotspot and drag.
  2. To make your webpages more friendly to users who have their graphics disabled or with vision disabilities, type a name for the graphic in the Alt text box.

To create the hotspot hyperlink:

  1. To link to a file, click on the folder icon next to Link text box, browse to, and select the desired file.
  2. To link to another website, drop your cursor in the Link text box, delete the # sign and type the complete URL for the website and then choose _blank from the Target pop-up menu to open a new browser window when the link is activated.

To delete a hotspot:

  1. Select the image that contains the hotspot.
  2. Using the Pointer hotspot tool. Select the hotspot (the handles will reappear).
  3. Press Delete.

Save your file and preview in a browser.

index
anchors