An Introduction To Image Maps
You already know how to make an image link to a certain URL, but there is also a technique for making an image link to several URLs, when you click on different parts of the image. Any image can be made into an image map.
They can seem a bit tricky at first, and mildly complicated. You should know a thing or two about X and Y coordinates before you start.
Mapping the Regions Within an Image
To make a basic image map, you'll need to know the X and Y coordinates of the upper-left corner and lower-right corner of each individual section. Sections can be rectangles, circles, or odd shapes, but in this example we are going to make simple rectangles.
The X coordinates will be so many pixels across, and the Y coordinates will be so many pixels down.
The picture we will be mapping is this: kittymap.gif
We will be dividing it into 4 rectangle shaped links, or regions.
This image is 200 pixels wide, and 400 pixels in height.
The upper-left corner of the first rectangle is 0 pixels across, and 0 pixels down, and the lower-right corner is 200 pixels over, and 100 pixels down. So a rectangle in region 1 would be mapped as 0,0,200,100.
The upper-left corner of the second rectangle is 0 pixels across, and 100 pixels down, and the lower-right corner is 200 pixels over, and 200 pixels down. So a rectangle in region 1 would be mapped as 0,100,200,200.
For the third rectangle the upper-left corner is 0, 200, and the lower-right corner is 200, 300, making the complete coordinates 0,200,200,300.
The forth rectangle is 0,300 to 200,400 making it 0,300,200,400.
You might be wondering how you can find these coordinates yourself. The typical way is to simply measure the pixel lengths in your graphics program. Most of these programs have a feature that tells you the X and Y coordinates of a spot on an image when you hover the mouse over that spot.
If, for some reason you do not have a graphics program, but still have an image that you want to map you can use Netscape Navigator. Put the image on a page with the ismap attribute and an <a> tag around it. Example: <a href="nowhere"><img src="yourimage.jpg" ismap /></a>. When you view the page with Netscape you will see the coordinates in the message box at the bottom of the window as you move the mouse over the image.
Client-Side Image maps
Now that the coordinates are determined we can start working on our image map.
This is the page we will be making. The complete HTML for this page is:
<html>
<head>
<title>kitty map</title>
</head>
<body bgcolor="#71A5CD" text="#000000" link="#00586E" vlink="#C2C2C2">
<font face="verdana" size="2">
<map name="kittymap_map">
<area shape="rect" alt="1" coords="0,0,200,100" href="bio.html">
<area shape="rect" alt="2" coords="0,100,200,200" href="art.html">
<area shape="rect" alt="3" coords="0,200,200,300" href="http://adobe.diaryland.com" target="_blank">
<area shape="rect" alt="4" coords="0,300,200,400" href="guestbook.html">
</map>
<center>
<h3>Welcome To My Page!</h3>
<img src="kittymap.gif" width=200 height=400 border=0 usemap="#kittymap_map">
<br>
(<small>psst, only the diary link works!</small>)
</center>
</font>
</body>
</html>
<map name="kittymap_map"> You want to start with the <map> tag. In it, you will give your map a name. This is a required attribute, and especially important if your page uses multiple image maps. In this case, I named the map "kittymap_map".
<area...> This is the tag that specifies each individual region of the map. It has several attributes, and does not require an ending tag. The three required attributes are "shape, coords, and href".
shape="....." This attribute will tell the browser what the shape is. The three types of shapes are rect (rectangle), circle, and poly (polygon).
alt="....." Alt text, this is text that will show up when you hover over the area.
coords="....." This is where you put those coordinates. The 1st number is the upper-left X coordinate, 2nd is the upper-left Y coordinate, 3rd is the lower-right X coordinate, 4th is the lower-right Y coordinate.
href="....." The href attribute should be set to where you want the section in the map to take you, when clicked.
</map> When you have mapped out everything, you close the map with this tag.
<img src="kittymap.gif".....> Where ever you place the image tag containing your map graphic as the "src" is where your map will show up.
usemap="#kittymap_map" This is very important, when you make your <img> tag, make certain to use the usermap attribute or else the map will not show up. The usermape attribute should be a # sign followed by the name of the map (that was set in the <map> tag.)
Usually the <map> tag is set somewhere after the <body> tag. You then type a <area> tag for each region of the image. Recent HTML standards state that you should close all tags that do not have a closing tag with a space and a fore slash (/) at the end, so really the proper way to code an area tag would be:
<area shape="rect" alt="4" coords="0,300,200,400" href="guestbook.html" />
...but this standard is still kind of new, so most browsers will read your map anyway.
Your map simply won't show up unless you place it on the web page using an ordinary <img> tag. Inside the image tag you also need to place the usermap attribute, and it may be wise to set the border to 0, unless you want a border. You can also specify the width and height of the image.
Additional Shapes
You are not limited to rectangle shapes on your image map. You can also use the circle and poly.
To make a circle, first you need to know the X and Y coordinates of the center of the circle, and then the radius of the circle. (note: radius is the length from the center of the circle, to the edge [or circumference] of the circle, measured in pixels for web purposes).
If we had a circle that we wanted to map, and it's center was located 50 pixels across, and 100 pixels down, and it's radius was 30, then we would map it as such:
<area shape="circle" coords="50,100,30" href="something.html">
If we had a irregular polygon shape to map, we would need to know the coordinates of each corner. You would want to list the X and Y coordinates of each corner going in "connect-the-dots" order.
For example, let's say we wanted to map this shape:
The <area> tag would look like this:
<area shape="poly" coords="10,40, 55,10, 290,10, 290,290, 10,290" href="something.html">
Main?