So, You Want An Image Map, Huh?
FYI: This tutorial refers to the use of a Common Gateway Interface (CGI). That's PERL script. You will need to attach to one to make it work. Chances are your server has one. You'll need to ask around to find it.
In all honesty, image maps are seldom done like this any longer. The overwhelming method is to set up a sever-side system or fake map built out of images. This is the method used when image maps first came into usage on the Web.
Use these links to jump around or read it all...
Hopefully put one on your own page? Hopefully?! Have you lost faith in us, Joe?
No. Not at all. I have no doubt you can create the items needed for an image map. What I am concerned with is if your server will allow you to use an image map. You see, an image map must be connected to a little ditty called a CGI. That's fancy computer-speak for a Common Gateway Interface. You need one of these little deals at your beck and call to make an image map run.
No problem! (you say) There are image maps all over the Web! I'll just connect to one and use it. Hmmm. If people were always that generous with their CGIs. You may be searching for a long while before you find a public domain Image map CGI. My Suggestion: Talk to your Webmaster and ask him/her if your server supports image maps. If so, make sure to ask for the path to the image map CGI! (That bit of Greek will make sense in a moment.)
That thing above is an image map. Roll your pointer over the image and watch the numbers roll by in the status bar. Those numbers are the X and Y vectors. It represents where you are, in pixels, on the image.
(Don't click...this isn't set up to work. It's just an example.)
<IMG SRC="imap.gif" ISMAP></A>
Please don't be thrown because the IMG command went to the next line. This all goes together. I just put the IMG on the next line because the entire command is just too long to fit across.
Now... let's break it down:
All THREE of these items must be grouped together in the format of a hypertext link. Notice the (A HREF) and (/A) at the front and back of the command. The format of a link makes it clickable. Let's take the THREE items in order of appearance. Please remember, this command format works on my server. You must configure the command so it works on your server.
The CGIThe very first thing the command above does is tell the computer where to get the CGI. This is known as the Path to the CGI (angels sing).
The path above is (notice this follows the "A HREF" as your path will):
Again, please don't try to connect to this CGI. It won't work. You have to be on this server for it to react favorably to you. Go to your Webmaster and ask for your own server's specific path. You might also be able to find the path by logging around on your own server, looking for someone else who already has a map up. Then just use the path they use. That's how I found this specific path.
The MapNow that you have told the computer where the CGI is, you then will tell the computer where the map is that the CGI is going to read. Once again (shake head here) you have told the computer where the CGI is. That CGI will read the map for you, but it needs to know where the map is. The second part of the command is the Path to the Map (angels, once again).
The path above is:
Here's a tricky part. Notice that the path to the map just follows right along after the path to the CGI. Here's why: You know that when you have a/lot/of/names/ all inside of slashes, those are directories. From left to right, they are inside one another. Above, "imap.map" is inside of "~jburns."
But is the path to the map inside the CGI? No. What you are doing by putting them together is telling that specific CGI the path it should take to find the map it is supposed to read. You are giving it directions.
Notice above that I only wrote the URL of the server ("index.html") once. It would seem the path to the map would need it again. Well, you can write it all out again if you'd like -- but it is not needed. The computer just understands that the path to the map is on the same server as the path to the CGI.
Making the MapHey! I need a map, right? Where do I get a map? Good question. You have to make it. You can't just go somewhere and download a map for your gif. The map you use for your image map has to be custom made for your purposes.
But, what does a map look like?
circle http://www.cnn.com 433,67 478,108
rect http://www.butterball.com 107,18 372,75
poly http://www.hairclub.com 3,108 103,63 103,76 123,78 33,126
Neat, huh? Kind of like a grid with points denoted for each URL. Well, that's exactly what it is. A grid of points that the CGI reads. When the mouse is on a certain area on the map grid, a certain URL is sent for. It's pretty slick, if you ask me. And you did. You're here, aren't you?
There are a ton of shareware programs out there that enable you to make a map. I could not even begin to explain each one here. You must go out, find one you like, and use its instructions to make your map. That said...
- The best program for Windows is MapEdit (41K Zipped)
It is wonderfully easy. It is what I use.
- The best program for MAC is MAC-Image-Map (285K Fat Binary)
- If these don't suit you, click here to search others.
Go to the page you'd like, bookmark it, and come back. After you're done here, go back to the page, download the program, check for a virus, then learn how to make a map. I told you this was a bit time consuming!
Once you have created your map, you can place it in any directory you want as long as the path to the map is correct. I always place my map and the .gif that goes along with it in the same place. It just makes things a little easier.
The .gifNo matter what map creation software you choose, you will be asked to create your map using a .gif. This .gif will, of course, be the .gif that will appear on the page as your image map. For instance, the map above was created over top of the .gif you see. It's just the way the programs work. They will display the .gif you choose, then you will section the .gif off and assign URLs to certain sections. But I'm rambling....
The last part of the image map command above is the .gif.
The above command for the .gif is:
Notice it is just a normal image command with the addition of the word "ISMAP". The computer will display this .gif for people to click on. It will be, for all purposes, your image map
(so pick a nice one).
The reason you place the ISMAP inside the image command is to alert the computer not to activate the image, but to rather read the map that is lying on top of it.
Putting It All TogetherThe basic format for an image map is this:
What You Have MadeI probably should have placed this at the top of the page, but you will understand it much better now that you have seen all of the parts that make up an image map.
It's called an "image map" because it is the map that is being used by the computer, not the image. The image is simply there to make the picture pretty. It's there for the user to see and use as a guide. It is the map that the computer uses to make the links.
What you did when you created an image map is laid a point graph (a MAP) over a .gif. One is lying on top of the other. The .gif is just there for the visual. It is the map that is lying on top of it that is being used by the computer. Thus the name: Image Map.
Hopefully this has helped a bit. I understand it all may seem somewhat mind-boggling at the moment, but try to muddle through it because once you do your first map, you'll wonder what you thought was so hard.