Lab 4
Page 6

Creating Image Maps

What's an Image Map

Image Maps are images included in web pages which have different clickable parts that link to different places. Try out the following image map:

Right-click on the above picture and choose "View Image". You should notice that the whole thing is one picture (even the buttons). Basically, to create a picture, you must create an image with a bunch of different rectangular parts that look like they should lead to other pages. Then, inside your HTML file, you can specify which areas of the picture should link to which pages.

Before you start creating your own image map, look for a few examples on the Web. Any time you can click on different parts of a single image in order to go to different pages, that is an image map. One example to get you started is the big image at the top of the Warner Bros. Homepage. The web sites of most large corporations will also have image maps.

Creating the Image

For our example below, we chose one picture and then created rectangular sections within it. Review this example and then With Paint Shop, create your own image with several rectangular pictures or areas which could lead to different links. Then save it to your public_html directory. Be sure to save it as a GIF or JPG file so that it can be displayed on the WWW.

Do not make a picture that looks exactly like this one. Design your own image map!

1. First, we found a picture:
   
2. Next, we selected a section with the box-selector tool and blurred it:
   
3. Then, we started making button-like areas by selecting a rectangular area and using the "Buttonize" filter:
   
4. We created a total of 5 buttons:
   
5. Finally, we added text with the text tool:
   

Getting the Coordinates

To make your image map work, you need to know the pixel coordinates (x, y) of the top left corner and the bottom right corner of each box that you wish to make into a link. Below, we've shown a few of the values for the rectangles in our example:

To find the coordinates of the boxes in your image, do the following:

1. Select the "Selection Box" Tool (the dotted-line box).
2. Without clicking, move it over your image and notice the numbers in the bottom left of your Paint Shop window. These are the (x, y) coordinates of each pixel you move over.
3. Find and record the coordinates of the upper left and bottom right corners of each box in your image. (You can write them down on a piece of paper or in a Notepad file.) It doesn't matter if your values are a few pixels off!

Just for reference, here are the pixel values for OUR example:

1. (0, 0) (128, 53)
2. (0, 53) (128, 106)
3. (0, 106) (128, 159)
4. (0, 159) (128, 212)
5. (0, 212) (128, 265)

Writing the html

Once you've created the image and found the coordinates for each box, you need to put all of that information in your HTML file. Look at our example and then follow the instructions to write the HTML code for your the image map you are creating.

Our example

For our example, we used the following HTML code:

<IMG SRC= im6.jpg USEMAP = #imagemap>
<MAP NAME="imagemap">
<AREA SHAPE="rect" COORDS = "0, 0, 128, 53" 
	HREF=http://www.cs.princeton.edu/courses/archive/spr00/cs111/>
<AREA SHAPE="rect" COORDS = "0, 53, 128, 106" 
	HREF=http://www.cs.princeton.edu/courses/archive/spr00/cs111/descrip.html#RQ-LB>
<AREA SHAPE="rect" COORDS = "0, 106, 128, 159" 
	HREF=http://www.princeton.edu/Siteware/CampusServices.shtml>
<AREA SHAPE="rect" COORDS = "0, 159, 128, 212" 
	HREF=http://www.cs.princeton.edu/courses/archive/spr00/cs111/STUDENTS.html>
<AREA SHAPE="rect" COORDS = "0, 212, 128, 265" 
	HREF=http://www.cs.princeton.edu/courses/archive/spr00/cs111/descrip.html#SC>
</MAP>

First, we included the image with the IMG tag just like any other image, except that we told the browser where to find its map (with the attribute USEMAP). Then, we used the MAP tag to start a map section called "imagemap". Next, for each box, we included an AREA tag with the shape, coordinates and appropriate link. Finally, we closed the MAP tag with </MAP>

What you should do

At the place in your HTML file where you would like your Image Map to be, type the following line:

	<IMG SRC = "myimage.jpg" USEMAP = #MyImageMap>

Once you have placed the image, you need to include a section somewhere within the HTML file that contains that mapping information. Copy the following lines to your HTML file:

	<MAP NAME="MyImageMap">
	<AREA SHAPE="rect" COORDS = "x1, y1, x2, y2" HREF = "link.html">
	</MAP>

1. Make a copy of the second line (<AREA ...) and paste it after the first. Repeat this until you have one <AREA ... line for every box in your picture that you wish to be a link.
2. For each box in your picture, fill in the AREA information in the following way:
   1. Replace x1 and y1 with the x and y coordinates of the top left corner of your box.
   2. Replace x2 and y2 with the x and y coordinates of the bottom right corner of your box.
   3. Replace "link.html" with the URL of the page which you wish this rectangle to link to.
3. When you have filled in one AREA tag for each box in your picture, save your HTML file and open it in Netscape to try out your image map.

Congratulations! You should now have a working image map (which you will need to submit). If you are ambitious, you may want to create a more interesting image map with all sorts of different shapes. Follow this link for an example. There are many resources out there which can teach you how to do this, so search for one if you would like to try.

It is important to realize the difference between image maps and picture links. A picture link, is simply a link, which has a pciture rather than text as the "clickable" region. With an image map, more can be done - one can divide the image into sections, and treat each section separately - this cannot be done with a picture link. The similarity is that in each case, a "button" is nothing more than a picture, until the HTML tags are put in to make it a link.