Week 3, Lab 2: Imagemapping

Navigation graphic:

imageMap.jpg

539 x 98 pixels

lefthand arrow: 0,0,25,98

first square: 40,8,120,90

second square: 132,8,215,90

third square: 230,8,310,90

fourth square: 320,8,400,90

fifth square: 420,8,500,90

righthand arrow: 515,0,539,98

Step 1: Install the Navigation Graphic

1.1 Even though this is Lab 3.2, we'll continue to work within the Lab 3.1 folder. Open the page bookscapes.htm. Find the point in your markup where you installed the "NEXT" and "PREVIOUS" links. Remove both anchor containers and their associated IMG tags.

1.2 In place of the tags you deleted, put a new IMG tag for a graphic called imageMap.jpg, with the details given above. This file resides in the images subdirectory along with the graphics you used in the first lab.

1.3 Save, Switch, and Reload. You should see the navigation graphic on your page.

1.4 Add a USEMAP attribute to the new IMG tag. Make the value of this attribute "#projectsMap". Note that it is not necessary to add an anchor container even though this image will act as a cue to multiple links. Add the attribute BORDER="0".

Step 2: Create the MAP Container

2.1 Set up a MAP container with the attribute NAME="projectsMap". Place this container in the HEAD portion of bookscapes.htm.

2.2 Within the MAP container enter seven containers, each on a separate line. Within the initial AREA tag of each AREA container, enter COORDS attributes with values that match those given above. Then add HREF attributes pointing to appropriate pages. (The "PREVIOUS" page for bookscapes.htm is index.htm.) For each tag, add an ALT attribute indicating the page each hotspot represents.

2.3 Save, Switch, Reload, and test each of your imagemapped hotspots.

Step 3: Modify Remaining Pages

3.1 Select the IMG tag for the navigation graphic in the file bookscapes.htm. Open the four other content pages in this set, dish.htm, esenior.htm, fugue.htm, and wallet.htm, and insert the navigation IMG tag in place of the navigation links already present. Save your work on each page.

3.2 Return to bookscapes.htm. Select the MAP container and then insert it into each of the four other content pages. Save each page.

3.3 Test all the links in your fileset.

If you finish early

The Web's a very large domain, so of course it holds both wonderful and horrible examples of graphic design. Using www.google.com or some other search service (or if you're feeling lucky, www.metaspy.com), find one page whose graphics seem particularly well done or impressive. Find another page that represents the other extreme. Write down both URLs for later discussion.