Once upon a time,a very long time ago, I went looking for how to make an image map, because I thought it would be really really neat. The page I found talked about needing a special program that cost lots and lots of money (now I think it might have just been Photoshop, but I'm not sure). Anyway, being a lowly high school freshman at the time, I didn't have the money to spend on that, so I gave up.
A couple months ago, I tried again. This time I was a lowly high school senior with no money to spend on that, but I got lucky. This time I found a couple pages that acually told me how to make them, no special six-hundred-dollar software needed. And so I learned, and got very excited, and re-did my site, and loved it, and now I'm going to pass on that knowledge to you so you too can enjoy the wonders of image maps. Just one last note: This is written for people who have at least a little knowledge of html. If you don't know anything about it, there's a wonderful FREE tutorial here. It's how I learned. Anyway, here it is, How to Make Image Maps:
Let's take a fragment of the html for my homepage:
<img src="almap.jpg" ismap usemap="#homemap">
<map name="homemap">
<area shape=rect coord="90,45 310,120" href="about.html">
The first line starts with the standard image tag, linking to the file where the image is stored. Then, you put in "ismap" to identify that this image is going to be a map. Finally, you have to tell the computer which map to use, and you do this using usemap="#homemap" You can call it whatever you want, but leave the "#" in the beginning because it's an internal link.(these are also really cool, but not what I'm talking about right now.)
Then you have to create the map.
First, you need to say that you're creating the map, and tell the computer which map it is. For this, all you need is the <map name="homemap"> Just make sure that whatever you put after name is the same as what you put after usemap, but withouth the "#".
Now comes the fun part, defining what areas of the image link to where.
For this step, it is very useful to have an imaging program which will tell you coordinates of you image as you roll the cursor over it. Photoshop does this, but I used Microsoft Digital Image Starter Edition, which came free on my computer. Check out all the art/photo editing programs you have to see if any of them do. If none do, you can either search for something on the web, hop on a friend's computer for a few minutes, or use the total size of the image as a base and guess.
OK, now the code. To define an area, you start with
<area Then you have to say what shape you want it to be, using shape=... for example shape=rect. Next, the size and location, using coords="...", for example coords="190,45 310,120". The coordinates start in the upper-left-hand corner (that's where 0,0 is). For a rectangle, the format is "upper-left-X COMMA upper-left-Y SPACE lower-right-X COMMA lower-right-Y." Other Shapes and their coordinate formats are below. After the coordinates, the only thing left to define is where the link goes. As usual, this is done with "href="...". At this point, if you want, you can also put in an alt="..." attribute, so that people can roll the cursor over the picture and have boxes appear telling them where the link will take them (Or anything, really).
Putting that all together, you get:
<area shape=SHAPE coords="COORDS" href="LINK" alt="WHATEVER">
Where The things in all-caps are replaced by their respective values, and "alt" is optional.
Other Shapes and Thier Coordinate Patterns:
Circle - shape=circle - coords="center-X COMMA center-Y SPACE radius"
Polygon - shape=poly - coords="x COMMA Y for each point, with a SPACE between each point"
That's everything I can think of right now. Have fun! And if you have any questions, feel free to contact me. And if you use this to build a site with image maps, let me know, I'd love to check it out!