Mr. O'Connell's Technology Home Page

Image Project Five: Image Maps

The goal of this project is to review the four methods of linking from an image to an external website. Students will prepare a large image (600 pixels by 600 pixels), and create a hyper-linked Image Map for that image.

Image Mapping an Entire Image

• 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.
• From your personal website, open gallery.html
• Click below your navigation bar and title.
  • The goal is to have the Div for Image Project Five to be ABOVE your other image projects.
• Create a new Div Tag for your project:
  • Insert<Div
  • Insert<at insertion point
  • ID: image_project_five
  • Click New CSS Rule
  • Under Rule Definition, choose This document only from the drop-down menu at the bottom of the dialog box.
  • Click Okay
  • In the CSS Rule Definition dialog box, click Background
  • Choose a contrasting background color for your Div.
  • In the CSS Rule Definition dialog box, click Box
  • In the Box dialog box, enter the following:
    • Width: 840
    • Height: 700 (you may need to adjust this later)
    • Margin (remove check mark on Same for All)
      • Left<set drop-down menu to Auto
      • Right<set drop-down menu to Auto
    • Click Okay
• Add the image to the top of your Gallery using the methods that you have learned this year.
• 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.