Share this Page URL

Chapter 9. Images Can Be Links, Too > Images can be maps, too. - Pg. 101

Images Can Be Links, Too 101 Originally, setting up an image map was a complicated affair in which you actually had to write a program that would decipher clicks on the image and tell the web server which page to load. Al- though gluttons for punishment can still take that road, the rest of us now have an easier method. The tall-forehead types call this method client-side image maps, but a better name would probably be browser-based image maps . In other words, in contrast to the old method that required the intervention of a program and a web server, this new method has everything built right into the browser. You also get the following extra benefits: · Browser-based image maps are faster because the web server doesn't have to process any image map info. · The browser shows the actual URL of each image map link. With server-based image maps, all you get are the coordinates of the map. · You can test out your map on your own computer before you load everything onto the web. For your image map to work correctly, you have to perform three steps: 1. 2. 3. Decide which distinct image regions you want to use and then determine the coordinates of each region. Use the <MAP> and <AREA> tags to assign a link to each of these regions. Add a special version of the <IMG> tag to your web page. The next few sections take you through each of these steps to show you how to create your own browser-based image maps. Step 1: Determine the Map Coordinates All the information that you see on your computer screen is divided into tiny little points of light called pixels. Suppose you went insane one day and decided you wanted to invent a way to specify any particular pixel on the screen. Well, because a typical screen arranges these pixels in 800 columns by 600 rows, you might do this: · Number the columns from left to right starting with 0 as the first column (remember, you're in- sane) and 799 as the last column. · Number the rows from top to bottom starting with 0 as the first row and 599 as the last row. So far, so good(!). Now you can pinpoint any pixel just by giving its column number followed by its row number. For example, pixel 10,15 is the teensy bit of light in the 11th column and 16th row. And, because your insanity has math-geek overtones, you call the column value "X" and the row value "Y." This "coordinate system" that you've so cleverly developed is exactly what you use to divide an image map, where the top-left corner of the image is 0,0. For example, check out the image dis- played in Figure 9.5. This image is 600 pixels wide and 100 pixels high, and it's divided into three areas, each of which is 200 pixels wide and 100 pixels high: · Area A--This area is defined by coordinate 0,0 in the upper-left corner and coordinate 199,99 in the lower-right corner. · Area B--This area is defined by coordinate 199,0 in the upper-left corner and coordinate 399,99 in the lower-right corner. · Area C--This area is defined by coordinate 399,0 in the upper-left corner and coordinate 599,99 in the lower-right corner.