image maps : 

links inside of images

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over each text area.

Making an image map:

1. Click on the image
2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
3. Select a shape (rectangle, circle, or polygon) from the lower left
4. Draw a shape with the drawing tool
5. Dreamweaver will create a translucent shape for your hotspot
6. Enter a URL or local web page file name in the Link section
7. If you want a link to open in a new browser window, set the "Target" selection to "_blank"
8. Set the "ALT" section to the desired alternate text
9. Create additional hotspots by repeating steps 3-8
10. When you've finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.

Note: You may find that when the user clicks on an image map in Microsoft Explorer, an outline appears showing the shape of the image map. To remove this outline, edit the HTML and add a small amount of JavaScript.

1. Find the <map> tag associated with the image you want to fix.
2. Within the <map> tag, find the associated <area> for this hotspot.
3. Inside this <area> tag, add the code onFocus="this.blur()"
4. For example,

<img src="table_files/lit_side.jpeg" width="140"  height="320" border="0" 
usemap="#mymap" align="left" hspace="10"> 
<map name="mymap"> 
  <area shape="rect" coords="2,115,138,152" 
      href="http://www.brickmag.com/" onFocus="this.blur();">
  <area shape="rect" coords="0,166,143,204" 
      href="http://www.thinkoutside.com/" onFocus="this.blur();">
  <area shape="rect" coords="1,219,138,253"
     href="http://www.jacketmagazine.com" onFocus="this.blur();">
  <area shape="rect" coords="1,273,144,307" 
     href="http://www.artcenter.edu/" target="_blank" onFocus="this.blur();">
</map>

all materials on this web site © copyright 2003, Philip van Allen