Lab6: 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 Connect via FTP to crow.ubalt.edu and download the folder named lab6 from introShare. Open the page bookscapes.htm. After the last closing paragraph tag in the present markup, insert a new IMG tag calling a graphic called imageMap.jpg with the height and width given above. The JPEG file for this graphic is in a folder called images which is within the lab6 folder.

1.2 Save, Switch, and Reload. You should see the navigation graphic at the bottom of your page.

1.3 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 serve 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 six <AREA></AREA> containers, each on a separate line. Within each initial AREA tag, 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 AREA tag, add an ALT attribute giving the name of the project to which this hotspot points.

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 at the bottom of each page. 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. You don't need to change any link information because every page has the same set of links. Save each page.

3.3 Test all the links in your fileset. Note that each page contains one link to itself: a silly but harmless feature.

This concludes Lab 6.