creation of an image map in plain English so hopefully you can place one on your own page.
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…
[The CGI]
[The Map]
[Making the Map]
[The .Gif]
[Putting It All Together]
[What You Have Made]
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.)
Here is the command that makes the above image map appear and
run:
<A HREF=”cgi-bin/imagemap/~jburns/imap.map”>
<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:
Notice there are THREE parts to an image map. There is the CGI (discussed earlier), a map, and a .gif. (In the above command, the map is titled “imap.map”.)
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 CGI
The 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):
https://www.htmlgoodies.com/cgi-bin/imagemap
All this beginning portion is doing is telling the computer where to find the CGI. Now, sometimes the CGI will be in a “bin” like it is here. Computer people will tell you that “bin” stands for binary, which in turn has to do with the UNIX-type format the CGI is using and on and on. Unless you’re actually thinking of writing your own CGIs in UNIX then “bin” probably should mean little more than a place where there’s a lot of stuff, like a trash bin. Get it? The actual name of the CGI we are using is “imagemap.”
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 Map
Now 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:
~jburns/imap.map
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 Map
Hey! 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?
Like this:
default http://207.155.15.117
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.
These pages are wonderful in that they have a great many tutorials on the programs, FAQs, and allow you to download. As always… never just download and install. Always check for a Virus! I will take no responsibility for someone else’s page.
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 .gif
No 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:
<IMG SRC=”imap.gif” ISMAP>
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 Together
The basic format for an image map is this:
<A HREF=”PATH TO CGI / PATH TO MAP”><IMG SRC=”image.gif”
ISMAP></A>
It is really difficult for me to tell you exactly what the paths are for your server. Mainly, I have no idea where on the server your Webmaster has placed the image map CGI, if there is one at all. My guess is that there will be one. You just have to follow the instructions and path structure above to connect them all.
What You Have Made
I 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.
[The CGI]
[The Map]
[Making the Map]
[The .Gif]
[Putting It All Together]
[What You Have Made]
