Imagemaps are hybrids between hyperlinks and images. With a twist. You can transform those pretty looking GIFs and JPEGs into useful things. And imagemaps can provide the "wow" factor.

1. Imagemaps
   1. Pseudo-imagemaps
   2. Server-side imagemaps
   3. Client-side imagemaps
   4. Server- and Client-side together

And there you have it. An image that's also a hyperlink. But what happens if you want more than one image/link, for something like a navigation bar? You would want to use a large image, but with different hyperlinks in different areas of the image. Sound impossible? Not so, with imagemaps.
       Imagemaps are essentially single images with different hyperlinks in different areas of the images. Multiple links in a single image. Isn't technology wonderful?
       There are three types of imagemaps. First if the "pseudo"-imagemap, which is not a real imagemap since it uses multiple images, each with a single link, to create the illusion of a single imagemap. Second is the server-side imagemap, which is real. This form of imagemap is called server-side because the web server controls the imagemap. The third and newest type is the client-side imagemap. This is called client-side since the imagemap is proccessed by the reader's computer, the so-called "client".

   Pseudo-Imagemaps

Pseudo-imagemaps aren't true imagemaps. They're a bunch of images, each one having only one hyperlink. The combined images give the illusion of a single imagemap. They are able to give that illusion because they have been created so they interlock seamlessly.
      There's no real trick to pseudo-imagemaps. You would just code the seperate images as you would in a normal image link. The only two possible problems are positioning the images and creating images to fit seamlessly together.
      To address the first problem, you should use tables to precisely position the images in a grid. To the second problem, I suggest that you first create the whole final image in a program such as Adobe Photoshop 4.0. When you're done, then use the marquee tool to cut up the image into smaller pieces. Voila! Images that will seamlessly fit together! Just like the bunch of images to the left. I cut them up from the picture underneath the series. When you put them together, they should look like the one below. One simple way to do that is to simply use the <br> tag after each <img> tag. If you did it right, it should look mahvalous!

   Server-side Imagemaps

This form of imagemap, the server-side, was the first to be developed. This form of imagemap is also the most complicated and intensive to do, as you have to collaborate with the webmaster of the server which will support your webpage.
       First of all, there are three components of the server-side imagemap you have to worry about. First is the image you want to use. On your left, you will see the image I'm going to use, and under that is the image with the areas to be made into links outlined, so you can see better. Second is the hyperlink. For server side imagemaps, the map is accessed by a hyperlink tag (<a>), not the image itself. And finally, there is the actual map to contend with. I will discuss the first two later (quite illogically).
       A map is simply an ASCII document (a regular ol' text file) that defines the areas of the image and the corresponding hyperlinks. It's pretty simple to create such a map. Here's a little sample:

From what you can see, it's NOT HTML. It's just a plain old text file. No problem. It's the content you have to learn. In the first line, "default http://www.url1.com", "default" tells the browser which URL to go to if an undefined area of the image is clicked. Here, if anyone clicks on an undefined area of the image (the large rectangle on the left), you will be brought to the default URL1 homepage. The next line, rect http://www.url2.com, contains information to define and area of the image, the upper-right square. Here, "rect" tells the browser that there is a rectangular area. The URL is the target when this area is clicked. The two sets of coordinates define the rectangular area; those sets are in (x,y) pairs. There's more detail about a shapes a little later on. The third line is just like the second, an area definition.
       So now you've got a map file. Now what the heck do you do with it? Well, my impatient friend, save it as a file with a ".map" extension. I've named my map file "mapfile.map". Wow, that's creative.
       Alright, you've got a saved map file. Big deal... until you actually use it. To utilize it, you have to use both the <a> and <img> tags. We'll start in the middle (you'll see how).
       First we must start out with our image tag. Nothing unusual here. Now here's the source-code for the sample image (I've left out some stuff to be concise):

Since you're the observant type, you'll no doubt have noticed the ismap attribute. This attribute has no values and simply tells the browser that this image will be used for a server-side imagemap. Now we shall go to the code surrounding the <img> tag; this is where the exciting stuff happens.
      I am now going to place the hyperlink tags around the image. Seems logical, right? After all, an imagemap is simply a really neato way to make links in an image. The source code is a bit more unique in this instance, though.

And that's it! You've got a fully functional server-side imagemap. Wow! A few notes:

• The above code works on most types of web servers, including NCSA-class servers. If you are on a Netscape-class server, then the code is simpler; you don't need the full path to the cgi-bin.
• Server-side imagemaps work well with most types of browsers, so there aren't compatablility issues. However, transfer time will suffer a little (c'mon, 3 seconds is a lot!) becuase the server is running the imagemap app in the background.
• There are many types of shapes you can define in an imagemap. After all, rectangles are square! (If you don't get the joke, and/or if you don't know the error in the joke, don't worry). Here's a nifty chart describing them. NOTE: The spaces shown are required.

Client-side imagemap is the newest form of imagemap there is. The code for the imagemap is completely in the HTML, totally self-contatined. There aren't any server programs to worry about, since the client computer, the reader's computer, does the work. Having the client computer do the work instead of the server also has the side-effect of speeding up download times.
      The primary tag of the actual map is the <map> tag. Unlike server-side imagemaps, there is not an external file. So we put the area definitions withing the HTML file. So we use the <map> tag.
      In all essence, what we are doing in the HTML is the same as what we were doing in the server-side map file. We will use the <map> tag in a similar fashion to the <ul> or <ol> tags -- lists if you're memory is spotty. The <map> tag simply delimits an area of HTML code as information for the client-side imagemap. There is only one attribute for the <map> tag, which is the name= attribute; each client-side imagemap code area must have a name, so that the image can reference to this code.

Just like lists, there are "list" items for the map section. These items are represented by the <area> tag. These tags have no content, just like the <'img> tag; their sole purpose is to provide the information for each of the link areas on the image. That's why they're called <area>.
      There are four main attributes for the <area> tag. All these attributes serve the same function as their corresponding element in a server-side map file. The first attribute is the shape=. This attribute controls the shape of the area, which can be rectangular, circular, polygonal, or a single point. The next attribute is the coords=. You simply enter in the correct series of x,y coordinates to define the size of the area. There are different protocols for each shape. The next two attributes are complementary, but never used together in the same tag. First is the href= tag. This should be quite familiar. The href= attribute is followed by the URL of the site you want linked to. The next attribute has no values, and serves the same function as the default element in the server-side map file. This is the nohref attribute; simply stated, when an <area> tag has this attribute, that area will not link to anywhere. This is useful for areas that don't need to be links.
      Now let's move onto a chart and a demo! Wow, a two in one package. Nothing beats that.

Before you get to see the finished imagemap, I'll have to explain how I used the map code. As you can see, there are many similarities to the server-side way to imagemap. The first two <area> tags are standard. They define the two link areas on the image. The first <area> tag defines the upper right area of the Dilbert image. The second <area> defines the lower right area of the image. Those are pretty easy to see; the shape= attribute defines the link area as rectangular. The coords= defines the x,y coordinates. Here, you see that the two sets of (x,y) coordingates are seperated by a comma, not a space. It is very important that there is no extra space between the numbers. The href= attribute defines the URLs. The last <area> is the only interesting one. This one does the function of the default element in the server-side map file. This area is defined to be the size of the entire image. Why? Because of the nohref attribute, this area is not a link. If this were a more complex imagemap, there would be many spaces that you wouldn't want to be a link. Instead of laboriously trying to use a shape=poly polygon, you can simply set the non-link area as the entire image. Since this area is the last to be defined, then it fills in the undefined areas. In this paticular imagemap, it is the large square area on the left. And now the moment you have been waiting for, the finished imagemap! If you want to see it, be sure you have a fairly new browser (IE4 or NN4).

Client-side Imagemap - Microsoft Internet Explorer

And there you have it! Now you know how to use client-side imagemaps. A few notes, as usual:

• Client-side imagemaps are a fairly new addition to the HTML standard. That has the nasty side-effect of not being shown properly by older browsers.
• These imagemaps add a little bit of code to the HTML file, and perhaps adding a little bit of time to download
• However, since the server does no work for the imagemap, download times are actually the same. In any case, adding either imagemap doesn't add a considerable amount of time.

Well, there you have it. Imagemaps are the great hybrids of images and hyperlinks. Aren't they great? Well, off to the exciting world of frames.
Top