Mr. O'Connell's Technology Home Page

home courses biography links

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

Stratocaster Image Map strap button body tremelo bridge jack plate arm knobs knob 2 pickups pickguard neck tuners straplock2
Click on any part of the guitar above to learn about aftermarket replacement parts
 




Opening the External Sites in Separate Tabs in Google Chrome

  • Open Chrome
  • Go to google.com
  • ctrl+t to open a new tab
  • Go to adobe.com in this new tab
  • ctrl+t to open a new tab
  • Go to apple.com in this new tab
  • ctrl+t to open a new tab
  • Go to microsoft.com in this new tab

Linking to an Entire Image (20 points)

  • Open Dreamweaver
  • Open your gallery.html page
  • Select the top left image of your First Image Project
  • In the Property Inspector, type Google into the alt field
  • Switch to Google Chrome
  • Select the Google tab
  • Select the Address
  • ctrl+c to copy
  • Return to Dreamweaver
  • In the Property Inspector, click inside the Link field
  • ctrl+v to paste
  • Click anywhere in the page
  • ctrl+s to save


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

  • Select the top right image
  • 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.

Once all of your links and alt tags work, you’re done.