Image Maps

Help Center > Adobe ImageReady > Image Maps

In HTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations. This is opposed to a regular link where the entire area of the image links to a single destination. If this is confusing hopefully these examples will help explain the definition.

To create an Image Map we must go through several steps:

  • First we must select what shape we would like our image map to be. Click and hold your mouse over the Image map tool in the tool box
  • Next click and drag your image map onto the image.
  • You have now created an image map

Now that we have our image map created we can turn that area into a clickable area, we can add rollover effects, we can even add hyperlinks to our image map

In our web content palette we now can see our image map. This is where we will go to add rollover effects or animation. This will be covered later. However keep in mind that this is the location where you can view all of your image maps. You can even select your image map by clicking on it in the web content palette.

To add a hyperlink to our image map:

  • First select the image map area. You may either click on the image map in the web content palette or you may use the image map selection tool located in the tool box.
  • In the image map palette, enter a URL (be sure to include http://)
  • In the image map palette, choose a target for the URL your choices are as follows:
    • _Blank Displays the linked file in a new browser window
    • _self Displays the linked file in the same browser window as the original file
    • _parent Displays the linked file in the same frameset. (this only works if you are using frames in your HTML document.
    • _top Replaces the entire browser window with the linked file. This is like _parent but it covers all framesets.
  • Fill out the Alt tag. This is for visually impaired users and those with web browsers that do not support your image files. This last step is not necessary but it can only help.

    • Your Image Map palette should resemble something like this:

  • You now have a working image map. To test your image map go to File > Preview in. This will open up your image as if it were on a Web page.

last modified on 11/20/2007 16:33