Create an Image Map Tutorial
Dreamweaver
Objective: Use Dreamweaver's Image-Mapping features to design an image that links to the internet.

---

Introduction: Dreamweaver's built-in image mapping tool is an easy way to create image maps ("hotspots" or "imbedded" links) on an image. These image maps, or "hot spots", can be linked to other sites on the internet or within a web page.

---

Skill Practice: Create an Image Map

Step 1: Find a picture, graphic, or image that you would like to create image maps for. Select the web sites or files that you would like the image maps to link to.

Step 2: Open Dreamweaver . Go to Insert Image at the top of the screen. Select image and follow the prompts to choose an image or picture to use.

Step 3: Once the picture appears on the screen, go to the toolbar at the bottom of the screen. You can expand the toolbar by clicking the arrow in the lower right-hand corner - .

Step 4: Click on the shape you would like your first image map to be and move the "crosshairs" to the place on the image you would like to place the image map. Once you have reached that spot, click and drag the crosshairs until you reach the desired shape and size. If you "mess up" just hit Ctrl Z to undo, and try again.

Step 5: After you have completed an image map, you will need to tell the link where to go. Looking back at the toolbar, you will see a box named Target. In the "Target Box" type in the name of the web address you want this image map to link to. Make sure to include "http://".

Step 6: Repeat step 4 as many times as you wish, then go to the "View Code" option to view the html code Dreamweaver has created for the image maps. Highlight the code and "copy it" by pressing Ctrl C. Paste the code into a html document using a text editor (such as Textpad or Wordpad), save the document, and re-upload it to a web space. You can also use Dreamweaver to do this step.