Image Mapping an Entire Image
- Choose a theme. Use your imagination.
- Prepare an image related to that theme that is 800 pixels by 800 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 for your Image Map project. Then, create a table to hold your Image Map using the same method you used for Image Project Two. Finally, add text to your new table.
NOTE: The Div for Image Project Five must be placed above the DIV for Image Project Four. That way, your most recent work will be seen first.
- Open Dreamweaver
- Open your personal website
- Open gallery.html
- Create a new DIV for your Image Project Five:
- Open gallery.html
- Select your .css file
- Select and copy your #image_project_one DIV
- Click at the end of your #main DIV
- Hit Enter twice
- Ctrl+V to Paste
- Rename the DIV to #image_project_five
- Change the height to 900px
- (Later, you can change the height and background color to suit your project.)
- Ctrl+S to Save
- Insert the new DIV into your Gallery page:
- Make sure you are in Code View
- Select Source Code
- Click at the end of your #main DIV
- Hit Enter twice
- Enter the following:
- <div id="image_project_five">
- </div>
- Switch to Design View
- Click inside the image_project_five div.
- Shift+Enter to add one line
- Insert a new table into the image_project_five DIV (Ctrl+alt+t).
- Configure the table as follows:
- 2 rows
- 1 columns
- Table Width: 800 pixel
- Border Thickness: 0
- Cell Padding: 0
- Cell Spacing: 0
- Center the table
- Right click anywhere inside your table, and chose Table>Select Table
- Properties>Align>Center
- In the top row, type Image Project Five: (Theme) Image Map, substituting the theme you have chosen for (Theme). For example, Arctic Tundra Image Map
- Drag your collage.jpg into the second row
- Format the text in the top row
- Spell check the page
- Save your work
- Map the entire image to different school-appropriate websites using all three hotspot tools.
- Do not allow the Hot Spots to overlap.
- Save and Preview your work in Google Chrome (F12)
- Adjust and edit as needed
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.
|
