Creating Image Maps

This is a fun way to set up links to other pages on your site. You can visually depict a map of your site and let the user move around easily. Of course, you can use buttons or plain links but don't you want to have some cool stuff on your site? You do all of this using an attribute on the <img> tag and a map definition created with the <map> and <area> tags.

Image Dimensions

It's really very simple. Pick your image and find out it's dimensions (width and height in pixels) and you're ready to go. A couple of hints about the dimensions - if you're looking at some size display and it simple says 98 x 28 then you can assume the first number is the width and the second number is the height. To give you an idea of what that particular size looks like check out the buttons at the top of the page. On my 21" monitor the image is about 1 ¾" wide and ½" tall. If you're using a monitor you can afford I think the dimensions are more like 1 ¼" wide and a little less than ½" tall. Keep these sizes in mind as you plan out your map.

Once you've got your image and it's sizes I would suggest printing it out (if possible) or at least sketch the outline on a piece of paper. I know this sounds a little old-fashioned, but hey, I'm an old-fashioned kind of guy. You'll find that it helps tremendously when you start figuring out the coordinate pairs you need to enter for the map definition.

Oh, before I forget, there are two kinds of image maps - maps that work exclusively on the viewers computer and maps that work in conjunction with scripts and programs on some other computer. The first kind is the kind I'm going to describe. Mainly because the second kind of map requires a more expensive type of account at an ISP and a lot more programming. The first kind is more for recreational users like us.

OK, back to the mapping business.

The upper, left corner of your picture is known to the computer as 0,0. Aren't computers wonderful? They start at zero when they count instead of one like us humans. That's how we can tell us apart. Beware of people who start counting at zero! The lower right corner is defined as your dimensions minus 1. In the example of the buttons on this page, 98 x 28, the bottom, right corner is known as 97,27.

Determine Areas

The next step is to lay out the areas you want to be "hot". That means that if the cursor moves over a "hot" spot on your image it will change from the "arrow" to the "finger" (or whatever the viewer has their cursor set up to do when they cross a hypertext link). You have three shapes you can define. You can use a rectangle, circle or a shape defined by many straight lines.

A rectangle is defined by telling the computer the coordinates of the upper, left corner and the bottom, right corner of the area. If I wanted to break my button into four, equal rectangular areas then the upper, left area would be defined by 0,0 - 48,13 or 49 pixels across by 14 pixels down. The bottom, left area would be defined by 0,14 - 48,27. Clear? That would make the upper, right rectangle be 49,0 - 97,13. Still with me? Then the last area, the bottom, right, would be 49,14 - 97,27. This would be put into HTML with the following code:

       <img src="../img/pghome.gif" usemap="#maphome" width="98" height="28" alt="[HOME]">
        <map name="maphome">
            <area href="home1.htm" shape="rect" alt="Home1" coords="0,0,48,13">
            <area href="home2.htm" shape="rect" alt="Home2" coords="0,14,48,27">
            <area href="home3.htm" shape="rect" alt="Home3" coords="49,0,97,13">
            <area href="home4.htm" shape="rect" alt="Home4" coords="49,14,97,27">
        </map>

Think you can handle that from here on out? Good, now let's talk about circular areas. Circles only require three numbers - the center point and how big the circle is going to be. If I wanted to put a circle smack dab in the middle of my button then the center point would be at 48,13 (or 49,14). Since my picture has even dimensions, I can't specify a true center and have to choose the nearest point. I don't want the circle to stray outside my image so I'll choose the size to be 14 pixels. That's the radius - so if the center is at 48,13 the circle will go all the way to the top but will leave one pixel uncovered at the bottom. This would look something like:

       <img src="../img/pghome.gif" usemap="#maphome" width="98" height="28" alt="[HOME]">
        <map name="maphome">
            <area href="home1.htm" shape="circle" alt="Home1" coords="48,13,14">
        </map>

The last definition let's you go crazy! You simply give coordinates for each of the line connecting points and your area is whatever happens to be enclosed within the shape that results. The lines can even cross if you want. You have to define at least three corners or you'll be in big trouble with the map police. Whoever heard of a container with no area?!?!? A triangular shaped area would look something like this:

       <img src="../img/pghome.gif" usemap="#maphome" width="98" height="28" alt="[HOME]">
        <map name="maphome">
            <area href="home1.htm" shape="poly" alt="Home1" coords="48,0,28,27,68,27">
        </map>

Can you figure out where that's located on a button?

Server Maps

Just to be complete - if you're lucky enough to have access to the full power of a web server then you would still do the paper mapping exercise. You wouldn't have to do any of the <map> or <area> stuff. You'd change the attribute on the <img> tag from usemap with a name to ismap all by itself. When the viewer clicks on the image the coordinates are passed to the server and that's where the scripts decide what to do.

If you look at the code that LinkExchange gives you, you'll notice that their ads are really server based image maps. That way they can figure out what site to send you to if you happen to click on an ad.

The Rusk Family . . . "the Legend Continues"