Client Side Image Maps

How to add an image map to your page

Image maps aren't as bad as they seem, at least if you use a client side image map using HTML rather than a CGI program. I may add a section on using a CGI-driven image map later on, but for now, lets look at one that just uses HTML and an image!

To begin, let's look at a simple image map I created. If you click the left half of the image, you will be taken to a tables tutorial. If you click the right side, you'll get a tutorial on frames. Both the links are on one single image, so we just call it an image map. Try it out:

So, how do we create one of these? First, you need to have an image you want to use. Just pick one you like, or make your own. Next, you need to know the width and height of the image you are using. If you are not sure, open the image in your image editing program. You should have some option that will tell you the width and height of the image.

Now you need to put the image on the page. To do this, you use the image tag, but with a new attribute: usemap.

The usemap="#mymap" command tells the browser to use a map on the page, which is named "mymap". Notice how it uses the "#" symbol in front of the map name. Also notice that we defined the width and height of the image. This needs to be done so we can use coordinates later on when we define the map. Speaking of that, lets see how to define the map. For this map, we would place the following code somewhere on the page. I just put it right after the <img> tag to make it easy to find.

Now you can see where the usemap="#mymap" from the <img> tag comes from. The name of the map is "mymap". Now, let's look at what all of this means:

<map name="mymap" id="mymap">
This defines your image map section, and gives the map a name. This map is named "mymap" In XHTML, the id attribute is required rather than name. If you are using XHTML transitional, both the name and id can be used.
<area shape="rect" coords="0,0,99,40" href="table1.htm" alt="Tables" />
The area tag defines an area of the image that will be used as a link. The shape attribute tells the browser what shape the area will be. To keep it simple, I only used "rect", which stands for rectangle. The coords attribute is where we define the edges of each area. Since it is a rectangle, we will use two sets of coordinates. The first set defines where to start the rectangle, where the top-left edge of the rectangle will be. Since this rectangle starts at the top-left edge of the image, the coordinates are (0 pixels, 0 pixels). The second two numbers define where to end the rectangle. This will be the lower-right edge of the rectangle. Remember that the total image size was 200x40. We want the lower-right edge of this rectangle to be halfway accross the image and at the bottom of the image. Going accross, half of 200 is 100, but we use 99 here because 100 can only be used once. We will use it in the second rectangle here. Of course, 40 pixels takes us to the bottom of the image. So the lower-right corner of this rectangle will be 99 pixels accross the image, and 40 pixels (all the way) down the image. And now the easy part: The href attribute is used to tell the browser where to go when someone clicks someplace on that rectangle. Put the URL of the page you want to go to in there, and the first rectangle is set up! The alt attribute allows you to define alternate text for that area.
<area shape="rect" coords="100,0,200,40" href="frame1.htm" alt="Frames" />
Basically the same as the previous area tag, but it is for our second rectangle. We start where the other one left off, but back at the top of the image. Since the right edge of the last rectangle was at 99 pixels accross, we start this one at 100 pixels accross. And since this will be the upper-left of the second rectangle, we start it at 0 pixels down the image (the top!). We end this rectangle where the image ends, so the lower-right coordinate here is pretty nice- (200, 40), the size of the image!
<area shape="default" href="http://www.pageresource.com" alt="Home">
The default is not really a new shape, it just covers anything that may have been left out. We didn't leave out anything in this map, but if we had, this would be the URL someone would go to if they clicked on any area we did not define earlier.
</map>
This ends the map section!

Now, you can use other shapes besides rectangles, but those are alot tougher to code by hand. I would suggest using a shareware image map creation program if you use other shapes in your map.

So, if you need a simple image map separated into rectangular sections, just do what we did above. You can have as many rectangular areas as you want, just add the extra area tags with coordiantes and urls. Sounds like fun, don't you think?

Well, that does it for now, let's go on to: Links: No Underline.