decorative banner

Creating image maps


    Image maps enable you to link one or more areas of an image--called hotspots--to a URL. When a user clicks on the hotspot, the Web browser loads the linked file.

    The main difference between using image maps and using slices to create links is in how the artwork is exported as a Web page. Using image maps keeps the artwork intact as a single file, while using slices causes the artwork to be exported in separate files. Another difference between image maps and slices is that image maps enable you to link polygonal or rectangular areas in your artwork, while slices enable you to link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an image map.

    Note: To avoid unexpected results, do not create image map hotspots in slices that contain URL links--either the image map links or the slice links may be ignored in some browsers.

    Rectangle image map compared to polygonal image map
    Rectangle image map compared to polygonal image map

To create an image map:

  1. Select the object that you want to link to a URL.
  2. Choose Window > Attributes.
  3. Choose a shape for the image map:
    • None to not designate an image map.
    • Rectangle to create a rectangular hotspot around the object. The hotspot boundaries are similar to those of the selected object's bounding box.
    • Polygon to create a hotspot that closely follows the outline of the selected object.
  4. Enter a relative or full URL in the URL text box, or choose from the list of available URLs. If you enter a full URL, be sure to include http:// (for example, enter http://www.adobe.com, not www.adobe.com). You can verify the URL location by clicking the Browser button.

To increase the number of visible entries in the URL menu:

  1. Choose Window > Attributes.
  2. Choose Palette Options from the Attributes palette menu.
  3. Enter a value from 1 to 30 to define how many URL entries you want to be displayed in the URL list.
  4. Click OK.

Adobe Illustrator Tutorials - Home | Web Designers Blog
web designer services by freelance web designer
Website Design
Website Maintenance
Graphic Design
Content Development
Website Redesign
Freelance Website Design
eCommerce Web Design
Content Management

China Wholesale - Electronics Products About Me
View My Portfolio
FAQ
Contacts
Useful Links
Add Link
Articles