Download All Files Into the Same Folder on Your Computer

Download all files into the same folder on your computer.

Downloads for this lesson:

·  imagemap.htm

·  history.htm

·  science.htm

·  english.htm

·  math.htm

·  imagemap.gif

·  top_image.jpg

1.  Open textmenu.htm in Dreamweaver. This screen will show:

2.  We need to have a graphic on the page in order to make it our “map”. Replace the text Insert Map Here with the image imagemap.gif When you have completed this step, your page should look like this:

3.  The next step is to decide how you want to break up your image into links. This graphic has a clear division between English, Math, Science, and History, so we will be dividing our graphic into these four links. Click on the graphic so the images section of the Properties window is showing. In this window, you will see hotspot buttons. Think of a hotspot as a layer that you place over part of an image to make it a link.

4.  Since our link is close to a square image, click on the square shaped hotspot to activate it. Then hold your cursor down over the upper left corner of the English part of the image and drag the blue box down and to the right until it is over the entire English square. This can take some practice! If your hotspot needs fixing, double click on your page to deactivate the hotspot tool, and then you can move and resize your hotspot.

5. Repeat the above step to add hotspots to the remaining three links.

6. Now it is time add the links to the hotspots. Double click on your image map to deactivate the hotspot tool. Now click on your English hotspot so the Property Inspector shows for this hotspot. Fill in the link, target and alt boxes in the Property Inspector. Repeat this step for the Math, Science, and History hotspots.

Link History to history.htm
Link Science to science.htm

Link Math to math.htm

Link English to english.htm

7.  Preview your image map in your browser and test it out. When you put your cursor over any of the four hotspots, they should link to the correct pages.

Congratulations! You have just created an image map!

Let’s move on to rollover menus.