Image Maps

Contact Us or call 1-877-932-8228
Image Maps

Image Maps

You can turn sections of an image into links. These linked sections are called hotspots and an image with hotspots is called an image map.

When you select an image on a page in Dreamweaver, you will see the following image map tools in the Properties Inspector:

To create an image map, you need to name the map and then draw your hotspots (rectangles, circles, or polygons) on the image.

Watch as your instructor adds an image map by following the steps below. You can follow along in ClassFiles/Dreamweaver/Exercises/index.html or you can wait until the next exercise in which you will complete the image map.

  1. Open ClassFiles/Dreamweaver/Demos/index-image-map.html in Dreamweaver.
  2. Replace the RunnersHome.gif image with image-map.gif.
  3. Click on the image and name the image map "navigation":
  4. In the Properties Inspector, click the Rectangle Hotspot Tool and draw a rectangle around the word "Home":
  5. The Properties Inspector will now show hotspot properties:
    • Notice that the Pointer Hotspot Tool is active. This allows you to resize and move your hotspot.
    • Make sure to include appropriate alternate text in the Alt field.
  6. In the Properties Inspector, click the Polygon Hotspot Tool and draw a polygon by clicking point by point around the words "Running Log." If you don't get it exactly right, you can use the Pointer Hotspot Tool to fix your points after:
  7. Again, make sure to add the alternate text.
  8. Save the page and open it in the browser.
  9. Test your hotspots. Do they work?
Next