Mr. O'Connell's Technology Home Page

Image Project Five: Image Maps

The goal of this project is to learn the four methods of linking from an image to an external website. Students will open Image Project One in Dreamweaver, and learn how to create four absolute links from each of the four images using four different methods. Once these skills are mastered, the student will prepare a larger image, and create a hyperlinked Image Map for that image.

Image Project Five: Aftermarket Stratocaster Parts

Click on any part of the guitar above to learn about aftermarket replacement parts

Linking to a Rectangular Section of an Image (20 points)

In the Property Inspector, select the Rectangular Hotspot Tool (lower left corner)

Drag a rectangle over part of the image

Read the reminder message that pops up, then...

In the Property Inspector, Type Adobe in the alt field

In the Property Inspector, type Adobe in the Map field

Switch to Google Chrome

Select the Adobe tab

Select the Address

ctrl+c to copy

Return to Dreamweaver

In the Property Inspector, click inside the Link field

Select the # (the number must be replaced with the link)

ctrl+v to paste

Click anywhere in the page

ctrl+s to save

Linking to a Circular Section of an Image (20 points)

Select the bottom left image

In the Property Inspector, select the Circle Hotspot Tool (blue, lower left corner)

Drag a circle over part of the image

Read the reminder message that pops up, then...

In the Property Inspector, Type Apple in the alt field

In the Property Inspector, type Apple in the Map field

Switch to Google Chrome

Select the Apple tab

Select the Address

ctrl+c to copy

return to Dreamweaver

In the Property Inspector, click inside the Link field

Select the # (the number must be replaced with the link)

ctrl+v to paste

Click anywhere in the page

ctrl+s to save

Linking to a Polygon Section of an Image (20 points)

Select the bottom right image

In the Property Inspector, select the Polygon Hotspot Tool (blue, lower left corner)

Click a series of points that traces the section of the image you wish to link

Read the reminder message that pops up, then...

In the Property Inspector, type Microsoft in the alt field

In the Property Inspector, type Microsoft in the Map field

Switch to Google Chrome

Select the Microsoft tab

Select the Address

ctrl+c to copy

Return to Dreamweaver

In the Property Inspector, click inside the Link field

Select the # (the number must be replaced with the link)

ctrl+v to paste

Click anywhere in the page

ctrl+s to save

Test your work in Google Chrome (shift+f12)

If you have followed every direction correctly, each of your four images will have a hot spot that links to each of the four websites.

Image Mapping an Entire Image (20 points)

Choose a theme. Use your imagination.

Prepare an image related to that theme that is 600 pixels by 600 pixels. You may use any school-appropriate image you wish.

Add the image to the top of your Gallery using the methods that you have learned this year (enclosing it in a table in it's own row, etcetera).

Map the entire image to different school-appropriate websites using all three hotspot tools.

Do not allow the Hot Spots to overlap.

Troubleshooting Guide

If a link doesn’t work:

Return to Dreamweaver

Select the arrow tool next to the hotspot tools

Select the hotspot

Delete the hotspot

Redo the hotspot according to the directions above (RTD, FTD).

Check to see if you left the number sign # in the link. Remove it if you did.

If your images or tables aren't displaying properly:

Right click inside of your table, and choose Table>Expanded Tables Mode. Sometimes this makes it easier to troubleshoot. Click the exit link at the top of the window to leave this mode.

Select the image, and change the border value to zero in the Property Inspector. Do this for all four images.

Select the table.

Look for the green drop-down menus (above or below the table).

Click the drop-down menus directly above the column.

Choose "clear column width".

Do this for both columns.

Click the drop down menu for the overall table

Choose "clear all widths".

If needed, also choose "clear all heights"

In some cases, it's quicker and easier to just rebuild the table and then drag each object into it rather than beating your head against the wall trying to figure out what's wrong with your existing table. Here's a link to the original instructions to you can review the instructions.