In this exercise, you will create a web navigation tool from an existing image using image maps. First, the image you will be using is a portion of the ETSU campus map that you can find on the ETSU web site. The portion I want you to use is the image shown below.
First, you need to download a copy of the image so that you can do your editing from your local drive. To do this, place the mouse cursor on the image and press the right mouse button. In the small menu that appears, select the option "Save Picture As". From the window that appears, select the directory to which you wish to save the image.
Second, create a blank web page from the XHTML template that is stored on the CDROM that came with your book. It can be found in the directory \CODE\Chapter 2\Fig2-3.html. Save this web page under the name img_map.html. Insert the downloaded image into this page using the <img> tag. Be sure to add the width and height attributes along with the src attribute. (The image is 600 pixels wide by 396 pixels high.) Don't worry about the alt attribute yet. Load your page in a web browser to verify that it works properly.
You can use any graphics program to find the coordinates of each item within the image that you wish to use for a clickable area. Microsoft Paint will work just fine. In Paint, the coordinates of the current cursor position will appear in the lower right corner of the window. You can also find the dimensions of the image itself by selecting the menu item "Image" and then the option "Attributes".
Paint can also be used to determine the coordinates of the shapes you are going to make into links on your image map. Using the mouse cursor in your graphics program, determine your coordinates to fit as closely to the item as you can. Zooming in can sometimes help this procedure. To zoom in Paint, select the menu "View", then from the sub-menu "Zoom" select "Large Size". Most often, a polygon is the shape to be used, in which case you will need to get coordinates of every corner.
For this particular assignment, create an image map that assigns four links to shapes within the image you downloaded. The links should be made from the four buildings in the map that are numbered. The links and their associated alternate text are as follows:
Be sure to turn off the image's border. As with using an entire image as a link, a browser will place a border around an image used for an image map.
Once you've completed this exercise, upload your page to your cscidbw.etsu.edu account. Be sure to upload the image too or use the following link as the src of the image:
http://faculty.etsu.edu/tarnoff/labs1710/img_maps/etsu_map.gifUpload your page before 5:00 PM Friday as this exercise will count as a graded assignment. Also, be sure to make the name of the html file img_map.html.
Created by David Tarnoff for use by ETSU students enrolled in CSCI 1710.