Assignment: Image Map Sample Page - 25 points

You will be creating an HTML page that uses an image map for navigation. Image maps are graphics that are layered with "hotspots" that link out to other pages. An online resource has been created for you to use in getting started with the HTML code for the image map section of your page.

File and Folder Structure

• In semester1 folder, create a new folder called image_maps
• Save the image map image into this folder and call it image_map01 (.jpg or .gif)
• In this folder, also create and save an .htm file called image_map_sample.htm in which you can display your image_map01

top

Creating the Image Map Graphic File (sample)

• Step 1 - Open Photoshop
• Step 2 - Go to FILE menu, choose NEW
• Step 3 - Choose settings as follows:
  • width=300 pixels,
  • height=200 pixels,
  • resolution=72 dpi,
  • contents=transparent
• Step 4 - Add a bitmap layer using the layer panel icons
• Step 5 - Use paint bucket or gradient tool to create a background
• Step 6 - Use pointer tool to add filters or effects to your background
• Step 7 - Add 4 text layers with link names to a variety of sites (e.g., search engines, bands, movie stars, etc.)
  • Add layer effects to "pop" your text off the screen
• Step 8 - If time, find and save the logos for the sites you choose
• Step 9 - Incorporate the logos into your image map in the same quadrant as each site name
• Step 10 - Use the Modify and Tranform menus to resize, rotate, etc. these logos
• Step 11 - Use Window/Optimize menu to choose .gif or .jpg format (whichever looks best)
• Step 12 - Go to FILE menu, choose EXPORT
  

top

Evaluation

You will insert this image map into a new page called image_map_sample.htm

Use the provided resource to create your image map code.

Link to each website and have it open in a new window (target="_blank") to confirm that you linked your image map correctly.

top