Imagemaps

What is an imagemap? An imagemap is a picture, a .gif or a .jpg, with "hotspots" that link to another page. Most editors have some sort of imagemap-maker included, and there are a lot of freeware/shareware programs out there too that will do it for you. I recommend using them if you can, imagemaps are a pain in the butt to do by hand. I highly recommend a program called "MapThis!" its an excellent little utility that does the job really well.

But if you are into pain, or like me, for one reason or another never seem to have a program when you need it, here's how to do it by hand. The method displayed here also doesn't require the use of a CGI-bin which is nice for people like me who don't have access to one.

Before we can make the imagemap we'll need a few things, an image for one.

Lets use this one. Save it to your harddrive. We'll also need some pages to link to. Open up your edtior, simpletext, notepad or text editor of choice. Make a small HTML file consisting of the following:

<HTML>
<BODY>

These are characters from the TV cartoon series "Sailor Moon".

</BODY>
</HTML>

Save this as default.htm. Now make a second small HTML file consisting of the following:

<HTML>
<BODY>

This is Sailor Moon, star of the show.

</BODY>
</HTML>

Save this as moon.htm.

Now comes the difficult part. Actually making the map. First let's make the document that will contain the image. Make a simple HTML file consisting of the following:

<HTML>
<BODY>
<IMG SRC = "cast.gif">

</BODY>
</HTML>

Now we have a HTML document with a picture in it, what we want to have is one with an imagemap in it. To make it into an imagemap we need to modify the image tag a bit.

<IMG SRC = "cast.gif"> needs to become <IMG SRC="cast.gif" usemap=#test>

The "usemap=#test" part tells the brower that the image is a map and that the links can be found in a map tag named "test". The usemap behaves a lot like an anchor, the image tag says "look for this map named test". Later we'll use the <map name =test> tag to name a tag so that the browser can find it. Just like an anchor point and anchor. Now let's make the map shapes. First we'll name the map, this goes right after the image tag.

<MAP NAME = test>

Next we'll define a hotspot on the map. Let's make it so when people click the girl in the pink rectangle it takes them to moon.htm. Right after the map name we'll place the area tag that defines the hotspot around the pink rectangle.

<AREA SHAPE=RECT COORDS="99,73,176,149" HREF="moon.htm">

AREA tells the browser that we are defining a hot spot, SHAPE tells the browser what kind (rectangle, circle or irregular polygon) of hot spot it is. COORDS defines the shape by telling it where the key x,y points are of the shape. In the case of a rectangle the first two coords refer to the x,y of one corner and the second two the diagonal corner's x,y. If it were a circle the first two coords would be the center point's x,y coords and the second two the a point on the outer edge of the circle. You'd need at least a third set to do an irregular polygon, then computer would juct "connect the dots between the coords. To get the particular coords you need (in this example the coords of the two corner points of the pink square) we just put our mouse over the point and write down the coords. For example if we want to make a hotspot on the image in the shape of a rectangle like thisthen we need to get the choords at these points..
If we wanted to make a circular hotspot like this one then we need the coords at these points.
Now you are probably asking where do I get these coords from?? It's easier than you think. If you have a program similar to Photoshop you can take the image into it and turn on "get info" or "show coords" or something similar. Then you just place your mouse on the corner or center of whatever you are going to define as a point and write down the coords. If however you DON'T have a program like Photoshop or if you do you can't seem to find the "show coords" window there is a work around that will let you get the coords right from netsscape. Let's make another small HTML document as an example.

Save this as coords.htm. Now if you open coords.htm in netscape you should see our image with a blue border around it. Pass your mouse over it and look down at the status bar at the bottom of the screen. you should see an address that ends with /fakemap?Some Number, Some Number. Those two numbers are coordinates. To get the particular coords you need (in this example the coords of the two corner points of the pink square) we just put our mouse over the point and write down the coords. Once we've got the coords we need we can delete the page 'coords.htm'.

Now to finish up the map. So far we have this:

Which tells the browser that we have an imagemap, and that that map had a hot spot at certain coordinates. Now we need to define a default link in case someone clicks on the map, but doesn't click on the area we defined. We need to create a new area after the first.

<AREA SHAPE=default HREF="default.htm">

A Note: You have to put this area definition after all other areas otherwise the browser won't read them. Think of this area like a blanket. All the other hotspots have to lay on top of the blanket otherwise the browser can't see them. The same goes for overlapping hotspots. You can make a large hotspot and have a little one inside it but the little one has to be first.

All that's left to do now is close the map and save the file. Add the close map tag after the last area definition.

</MAP>

Your document should now look like this:

Save this and test it out in a browser, we're all done.