Client Side Image Maps

This is a basic introduction to Client-Side Image Maps.
What you will need:

1.A graphic that you want to use as your image map.
2.You need to know the dimensions of the graphic, i.e., height, width.
3.For those of you without a mapper, some graph paper.

Let's assume we are working with a graphic that is 250 wide and 100 high.


Example:

If you move your cursor over the map, you will see the names of the colors in the status bar. Don't click on them, they don't go anywhere!

What you have to do next is figure out the coordinates of each section of your map(graphic) so you have that to enter into your code.  Looking at the example, you see several different colored areas on the graph.  Those represent the different areas that I want to enter links into my map.
Each line of the graph represents 10 pixels. So here is what the coordinates of each of the colored areas are on the example:

Light Blue: 10,10,50,40
Green: 60,10,100,40
Red: 110,10,150,40
Yellow: 160,10,190,50
Dark Blue: 10,50,98,90
Purple: 110,60,240,90

What do these numbers represent?
In the example of light blue, the first two numbers 10,10 represent to top left corner of the rectangle and the last two numbers 50,40 represent the bottom right corner of the rectangle.

Now you must decide what links you want to be placed in the different areas. 
I usually write those down next to my coordinates. 

NOTE: For ease of understanding I am only working here with
rectangle coords. There are other options, i.e., circle and poly.
Now, decide on a name for your map. I named the above map "teach".
Keep it short and simple.
For this map the total code would look like this:

<IMG SRC="maps1.gif" WIDTH=300 HEIGHT=150 usemap="#teach">
<map name="teach">
<area href="light blue" shape="rect" coords="10,10,50,40">
<area href="green" shape="rect" coords="60,10,100,40">
<area href="red" shape ="rect" coords="110,10,150,40">
<area href="yellow" shape="rect" coords="160,10,190,50">
<area href="dark blue" shape="rect" coords="10,50,98,90">
<area href="purple" shape="rect" coords="110,60,240,90">
</map>

For a more in depth view of these principals, go here: Next Page.

There are a few rules also: surprise, surprise!:

No spaces between the beginning of the coordinates and the end.
No shortcuts on the AREA tag, i.e, you can't just type "a".
Your map must have a name and be referenced as in the example with the pound sign.
You must type in the full URL starting with http:// for the link of where you want the link to take the user.


Image Map Example

Do not use the links in this example image map. They do not go anywhere.
This is only meant to be an active example of what you can do.