• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 15. Creating Links within an Imag... > Refining image map shapes and assign...

Refining image map shapes and assigning links

The previous two procedures did not attempt to create image-map shapes that were perfect matches for the items pictured. You’ll improve the shapes now, and then assign URL and name information to your image maps. Since the fennel is already in view and enlarged to 300%, you’ll start with that image map.

Select the Image Map Select tool (). If the fennel image map is not already selected (so that the image-map border appears as a red line with anchor points), select it now.

Select one of the anchor points that doesn’t match the shape of the fennel and drag it to a better position.

Dragging an anchor point

Finished image map area

One by one, select other anchor points and drag them into position until you are satisfied with the shape of the image map.

You can add individual anchor points by Shift-clicking: First, position the pointer where you want to add a point. Hold down Shift, so that a small plus (+) sign appears in the pointer icon, and click. To remove anchor points, Alt-click (Windows) or Option-click (Mac OS). In this case, a minus (-) sign appears in the pointer icon.

In the Image Map palette, type Herbs for Name, pages/herbs.html for URL, and select _blank for Target.

Finish up your work on the papaya image map by doing the following:

  • Hold down the spacebar to switch temporarily to the Hand tool and drag until you can see the papaya image-map area.

  • Select and move anchor points until you are satisfied with the image-map shape.

  • Select options in the Image Map palette, and type Papaya for Name, pages/fruits.html for URL, and select _blank for Target.

Choose Select > Deselect Image Maps.

Double-click the Hand tool () or Zoom tool () to reduce the view.

Choose File > Save.


If you want to see your image without the light blue image-map lines and ghosting, select the Toggle Image Maps Visibility button [] in the toolbox, or press A. Reselect the button or press A again to see the image-map indicators.

So far in this lesson you have created three image map links and five slice links within your Web page image. You could go ahead and create additional image maps for the avocado and grapes if you want to practice, or you can go on now to the next topic.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint