Image Maps in Dreamweaver

• Create Your Image

An image map is an image that contains regions called hotspots that serve as links.  The image to the right, for example, contains three hotspots that take users to either the Art, Music, or Theatre sites.  Image maps are very common on the web for those types of things that can best be expressed by (or at least enhanced by) a picture.  A clickable map of the United States, for example, might be more attractive than simply listing text links to all 50 states.  Using an image map also gives you more control over fonts and layout, but since images are much larger, the page will also take longer to load.

Generally, you will create your image in an application like Photoshop or Fireworks.  Refer to other handouts for the details on using these programs.  You will probably make good use of the Type tool to include any text in your image, and then either draw or copy/paste images into a separate Layer so that you can move things around independently.  When you’re finished creating your image, you’ll Save As… either a GIF or a JPEG (use JPEG for images with continuous tone like a photograph).

 

• Define Hotspots

Perform the following steps in Dreamweaver to set up your image as an image map:

1.       Add the image to your site folder

2.       Add the image to a page by dragging it from the site window onto the page

3.       Click once on the image to select it

4.       You should have a “Map” section on the Properties palette; if not, click the triangle in the lower right corner of the palette.

5.       Choose the shape on the Properties palette (rectangle, oval, or polygon) that will best capture the part of the image you want to serve as a link

6.       Click and draw the shape over the image.  The area you draw will be highlighted in green.

7.       Define a local link from the Properties palette by pointing to a file in your site with the “bulls-eye tool” or type in the full URL for an external link.

That’s it!  Try and keep the size of your images down to a reasonable size if you expect a lot of slow-modem users will be connecting to your site.