Computer and Web Design Resources

Creating Image Maps (Hot Spots) in and Dreamweaver MX

1. Save these two files to a folder of your choice on your hard drive to work along with this tutorial: twinlife.htm & twinlogo.gif. To save the files, right click the links and select Save Target As from the menu. (If you are a student in class, open the files that you created in TextPad on page 3.02 steps 1 & 2)

2. Open Dreamweaver - Click Start > Programs > Web Design > Macromedia > Dreamweaver MX (note: at home Dreamweaver is probably in a different location on your start menu).

3. In Dreamweaver, click File > Open. Navigate to the folder that you saved the twinlife.htm file in, select twinlife.htm and click Open or you can double-click the file. Note: I have not supplied all the images that go with this file, ignore the missing image symbol that you see on the screen.

4. Click once on the Twin Life Magazine Logo at the top of the page. The property inspector should display on your screen.

Dreamweaver MX Property Inspector

Dreamweaver MX Property Inspector

The Property Inspector displays settings used on the selected image. You can also use the Property Inspector to create Image Maps. Notice there is a small down arrow in the lower right-hand corner of the Property Inspector. This arrow is used to expand the Property Inspector so that it displays all of the tools available for the item you have selected.

5. Click the expand arrow to display the entire Property Inspector

Dreamweaver MX

Dreamweaver MX Property Inspector

With the Property Inspector expanded, the mapping tools are now available.

The arrow (Pointer Hot Spot tool) is used to select existing "hot spots", the rectangle (Rectangular Hot Spot tool) is used to draw rectangular hot spots, the circle (Oval Hot Spot tool) is for oval hot spots and the last icon is the Polygon Hot Spot tool for drawing "free-form" (irregularly shaped) hot spots.

6. Click the Rectangular Hot Spot Tool. Position your cursor above and to the left of the words Fron Mapped Image t Page on the twinlife.gif image. Hold down your left mouse button and drag your mouse to the right and down so that the words Front Page are enclosed in a light blue rectangle like the image to the right.

After drawing the hot spot the property inspector should look like the image below. Link and Target boxes are now available.

Dreamweaver MX Property Inspector

7. You will use the Link box to specify the page that the user will go to when they click the Front Page hot spot. You can type the filename in the Link box (replace the # symbol). For this exercise, select the # symbol and type frontpage.htm in the Link box.

Students in class: Alternatively, if the files you want to link to already exist you can click the folder next to the link box. In the Select File dialog box, navigate to the file that you want to link to, select it and click OK.

The Target box is used to specify how the link will be displayed. You can display the link in a new Window or if you are working with frames you can specify that the link will open in a specific frame.

The Alt tag is used to set Alternative text for the image. (Alt text is important: It provides a text description of the image for people who surf the web with images turned off and it is also important to people with disabilities).

8. Repeat step 7 using the Rectangular Hot Spot Tool to create hot spots for the remaining headings on the twinlife.gif image, News, Features, Articles, and User Surveys. Use the filenames news.htm, features.htm, articles.htm, and user.htm for the respective links.

Dreamweaver automatically generates the map code and inserts it into the bottom of the twinlife.htm file. Here is what the code looks like:

It also inserts the usemap tag into the img src tag:

9. If you would like to see the code, click the Show Code icon at the top of the Dreamweaver screen (below the File menu). Or click View > Code.

10. Save the file, click File > Save. You're done!

(If you are a student in class you will perform these steps for each page in the Twin Life site. You can then re-open the files in TextPad to see the code that you created and finish up any necessary changes to the file.)

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.