The last bit of high-tech graphics trickery we want to cover in this lab is the creation of images with distinct regions that serve as links to different URL's. Such images are called image maps. You have almost certainly encountered them on the web, but if you haven't noticed you might want to re-visit WSO's home page. Each of the images by the tips of the fingers in the image on that page links to a distinct destination.
There are several varieties of image maps used. We will work on the simplest -- client-side image maps. If you want your image maps to be functional for the largest possible set of visitors (including those using old browsers), you should also learn about server-side image maps someday.
To learn about client-side image maps, I'd like you to augment the text links to your labs from your CS 105 labs page with an image-map version of these links. The image I want you to use is shown below and available in the "Lab 6 Images" folder as "blandnails.gif". In the on-line version of this document, I've set this image up as a map that will take you to the lab writeups for the topics indicated. I'd like you to put a copy in your page modified so that clicking on the topic of a lab will take you to the page containing the work you did for the lab. You should start by copying the image itself into your "www" folder (not your Lab 6 folder because it will be referenced from your CS 105 labs page).
The use of image maps requires the creation of a "map" specification that gives the coordinates of the active regions of the image and the URLs these regions should serve as links for. There are many utilities available to simplify the creation of these maps. We will use such a utility in this lab. Like PageSpinner, this utility is shareware. Unlike PageSpinner, we have not paid a license fee for this utility. I felt the brief use you will make of this utility in this lab fell under the category of "trying" the product. If you do become a frequent user of such a mapping utility, you should be aware that we have not paid any shareware fee to cover that use.
The utility I want you to use is called "ImageMapper". I have put a copy of it in the "CS 105" folder on Cider Press. ImageMapper and other similar utilities can be found on the WSO software archive server. You should copy the ImageMapper folder onto the desktop of the machine you are using to make it more accessible.
Before launching ImageMapper, open your "cs105labs.html" file using PageSpinner and add the "blandnail.gif" image to the top of the page. Then, without quiting PageSpinner, launch ImageMapper-v1.4. After the program starts, choose "Open Graphic" from the file menu and find and open your copy of "blandnails.gif".
The ImageMapper program will display the image in a window and a small set of tools in another "Tools" window. Select the "rectangle" tool from the "Tools" window with the mouse and then drag to draw a rectangle around the text: "The WEB: Technologies and Techniques".
As soon as you draw the rectangle, ImageMapper will display a default URL in the "Object Info" window. Drawing the rectangle indicates that the region you outlined should become a link. ImageMapper now wants you to enter the edit the default URL it has displayed, replacing it with the URLfor the page that region should link to. Fill in "http://www.cs.williams.edu/~tom/courses/105" as the URL.
Follow the same procedure to associate URL's with each of the blocks of text describing one of this semester's labs. Feel free to experiment with shapes other than rectangles even though rectangles are probably most appropriate for this particular image. For each lab, enter the URL for the page you produced during that lab. The URL's will eventually be stored in your 105 labs page, so URL's relative to the folder containing that HTML file will work fine.
When you are all done, select "Generate MapImage" from the "Image" menu. Make sure that "Client-side HTML" is selected in the dialog box that appears and then click "Compile". In the next dialog box displayed, enter "labsMap" for the Name and then click "Generate".
At this point, ImageMapper should pop-up a new window with the HTML for a simple but complete page containing your image and a map that would turn it into an image map. Rather than use this page, however, you should copy just the specification of the map from this page to the PageSpinner window for your cs105labs.html file.
So, drag the mouse over the text of the map specification (from the < MAP > tag to the < /MAP >). Go to the "Edit" menu and select "Copy". Switch to PageSpinner at this point and "Paste" into a point just before where you inserted the IMG tag for "blandnails.gif."
All you have to do to finish the job is include the attribute
in your IMG tag (you may also want to add BORDER=0).usemap="#labsMap"
Save your updated labs page and view it using a browser. Test all the links to make sure you typed the URL's correctly.
