Image Maps

An imagemap is where you take one .gif or .jpg file and map certain areas of that image to link to other pages or section. Some people have the misconception that an imagemap is any large image with links on it. This is not true. For example, many people call the main graphic on my opening page an "imagemap" - It’s not. The image on my main page is broken down in to many smaller images and each image links to a different area, but there are no "mapping"coordinates programmed into the image, thus making it a non-imagemap.

There are two types of image maps, server-side and client-side.

Server-side image maps are where your HTML calls for a map file (*.map) in your directory on the server and then calls a CGI mapping program on the server that knows how to split up the image into coordinates found in the map file. This was the way all imagemaps used to be, but now they have made it possible to skip the CGI mapping program and have programmed that directly into your browser. This is a client-side image map.

Client-side image maps are much faster because everything needed is embedded into the html. You don't need to access the server for anything. There is only one drawback, only Netscape 2.0+ and Internet Explorer 3+ can read client-side image maps. So if you have an earlier browser, then your imagemap graphic won’t work. This should not be much of a problem though.

To create an image map, you will first need to create the image in a paint or drawing program and save it as a .gif or .jpg file.

Next, you will need a program that will divide your image into sections and save those coordinates to a map file. Some of them are: Web Image, and Map Edit.

Once you have used a program to create the image map, save the file. Now you need to decide whether you want to have a server-side or client-side image map. If you want speed, go with client-side. If you want everyone on the web to use your image map, use a server-side.

To do a server-side image map on your homepage:

• Check with your ISP and get the path of the image map program.
• Write the path into your html, replacing the map file name with your own.
• Upload your .map file to the server.
• Test the image map and make sure that everything works.

To do a client-side image map on your homepage:

• Open up the .map file you created.
• Highlight and copy the coordinates into your html.
• Now edit the coordinates so it looks like this:

• <MAP NAME="CLIENTS">
  <AREA SHAPE="RECT" HREF="http://www.screamdesign.com/" COORDS="0,0,111,90">
  <AREA SHAPE="RECT" HREF="mystuff.html" COORDS="149,277,300,422">
  </MAP>
  
  <IMG border=0 SRC="images/clients.gif" USEMAP="#CLIENTS">
  
  The blue type is what you have to type in. The white type depends on your information.

• Test the image map on your hard drive, and when it works, upload it to the server.

Note: When you make a client-side image map, it is a good idea to have your links in a text form somewhere on the page so that if someone using AOL for example can still get to your links.