by Mark Larmand

No matter where you drive on the Internet's highways and byways, you'll come across different and interesting visual content. For those of us who design and create Web sites, this is our never-ending goal - to be fresh, original and creative in our presentation of a site's contents. Since formatting of textual information on a Web page is still somewhat under-developed and loosely supported, designers will tend to fall back on the graphic elements of a site to come up with new angles on presentation.
June 13, 1999

One of the ways they can do that is by using Image Maps. Using an Image Map on a Web page is a way of creating interactivity with the end user, but without the use of high-tech plugins or bulky applets. Just one image, a small snippet of HTML code, and the user's mouse are all that's required to turn a standard static graphic into one that can be interactive and even entertaining to Web site visitors.

There are two types of Image Maps in use on the Web today, although one of them is on its way out as the Web moves toward being more time and cost efficient, and Web creators look to improve the functionality and performance of their Web sites. And hopefully, as prices come down on computer systems and modems, bandwidth conservation won't be as big a concern as it is today.

The two types of Image Maps are:

• Server Side Image Map
  (uses a CGI script stored on the server)
• Client Side Image Map
  (written into the HTML document)

Server Side Image Maps - Flogging a Lame Horse

Server side image maps are not in use as much these days, and for good reason - they're too slow. But older systems and browsers can't use or understand the HTML syntax that powers the newer type of Image Map. The way a server side map works is this - you create your graphic, map out the 'hot-spots' (linked areas) within the image, then create a separate .map file containing the coordinates of all the hot-spots within the image that will be used as links to other content - be they textual or graphic in nature.

When all the creating is done, you then insert the image into your Web page as you normally would, and upload the .map file as a separate element to your server. Then, when someone clicks on a linked area within your image map, a 'call' is made to the server where the .map file resides, to retrieve and decipher the data from the file using a CGI program, and tell the browser what action should be performed or where that link is to take the user. This can more often than not be a slow process; depending on the speed of the user's modem, their server's performance at the time, the performance of the server where the Web page, .map file and CGI are stored, and then to a lesser degree, the processing abilities of the end user's system.

To resolve this situation, a new HTML standard was developed in recent years, whereby the map information could be incorporated right into the HTML code for the Web page that the Image Map is being used on. The newer HTML standards now include specific syntaxes and tags that can allow Image Map data to be stored directly within a Web page's coding. This has greatly increased performance and useablity for the end user - and made site creators very happy too! :)

The new and improved Image Map type that is being widely used and accepted today is now called the Client Side Image Map.

The Client Side Image Map - Easy to use, right out of the can!

The client side image map solves the problem of 'delayed reactions' when a user clicks one of the map's hot-spots, by having the mapped link coordinates contained directly in the HTML code that makes up the Web page itself. Thus, when a linked area is clicked, it is treated by the browser as just another link. No special calls, and no wandering off to various servers to retrieve the information about where the link should take the visitor, or what other action should be carried out.

First of all, you'll need to create an image to be used as your map. The size of the image does not matter where maps are concerned, but keep in mind the download time of the image will be affected by its size. Be nice to your visitors.

Once you've got your image created, you'll need to map out the hot-spots of the image that will be used as links. There are a few ways of mapping your image, the main one being the use of a graphic program specifically designed for this purpose, or one that has image mapping capabilities. For sheer speed and ease of use, I recommend the dedicated mapping program Mapedit by Boutell Com. It's fast, easy to learn, and very sleek. Other programs you can use for mapping are Macromedia Fireworks, Adobe ImageReady and Corel Xara. Fireworks and ImageReady are image optimization programs that also have other 'side-line' capabilities - one of which is creating image maps from your source image. Corel Xara is a vector illustration program that can also create image maps and generate the HTML for them. All of these programs are available in sharware versions, so try them all to see which you prefer to use for creating your image maps.

If you don't have any of these programs, you can still map out any image you want with a normal graphics program, such as Photoshop, Paint Shop Pro, or any program that can show you what the pixel size of your selection is. After reading this article and seeing how Image Map coordinates are defined, you'll understand better how to do this.

Most mapping programs use the same methods. You use a type of selection tool that draws a basic shape around specific areas of your image, then you attach a URL or action to that shape. When the image is saved to disk, you have the option of copying the HTML code for the map to the clipboard so you can paste it into your HTML code yourself, or having the program actually create an HTML file containing the coordinates code for the map.

This picture shows what the process looks like within Mapedit. Click on the image to see a larger screenshot. I've created a rectangular area in the image to act as a link, or Hot-Spot. In the HTML code for that image, adding a USEMAP attribute inside the IMG tag tells the browser that the image is a client-side image map. Added to the USEMAP attribute is the NAME of the map.

Example:
<IMG SRC="myimage.gif" Width="250" Height="250" Border="0" Alt="My Image" USEMAP="#mymap">.
This symbol - (#) put in front of the map name, tells the browser that the data for the map can be found within the same HTML file as the image.

Then in between the <HEAD></HEAD> tags is where the browser looks and finds the map code:

Example:
<HEAD>
<Map Name="mymap">
<Area Shape="RECT" COORDS="25,50,75,50" HREF="mypage.html" Alt="My Home Page">
</Map>
</HEAD>

Linked areas can also be created with other shapes - circles and polygons. Each shape has its own type of coordinate code. Here's how the coordinates are layed out for each type of shape: x=horizontal plane, y=vertical plane. Or in other words, left to right, top to bottom.

• (RECT) Rectangle:
  left & top[1x,1y]; right & bottom[2x,2y].
  ex. COORDS="1x,1y,2x,2y"
  
• (CIRCLE) Circle:
  center[x,y,]; radius[r]
  ex. COORDS="x,y,r" The x tells where the hot-spot is from top to bottom. The y tells where it is from left to right. And the r defines the size of the circle.
  
• (POLY) Polygon:
  ex. COORDS="x1,y1,x2,y2,...,xn,yn"
  ex. "50,50,60,80,50,80"
  These coordinates would produce a triangular hot-spot.

Think of the numbers in sets of two, like this (following the numbers from left to right):

[set 1/50,50] 50 pixels right,and 50 pixels down is where the triangle starts.
[set 2/60,80] 60 pixels right is the angle of the right side (we moved 10 more pixels right), and 80 pixels down is where the right side stops (we moved 30 more pixels down from the top).
[set 3/50,80] 50 pixels goes back to the left by 10 pixels, and 80 pixels tells that the bottom line stays 80 pixels down from the top.

The coordinates for the left side of the triangle are not really needed because the first and last numbers are automatically joined to close the shape. There is no specific limit set as to how many angles (vertices) a polygon shape can have, but we should try to keep them within reason.

One of the downsides concerning the use of Image Maps is that if a user has their graphics turned off, or their browser is not capable of rendering images, there will only be one broken link image on the page to represent all the links that may be within the map image. Especially if the image map is your navigational interface. A good decision here would be to use the 'ALT' attribute of the image tag for each hot-spot 'Area' within your image map. That will at least give them a fighting chance.

One of the upsides of using Image Maps is that you can make them quite entertaining. If you were to create a larger source image, and then cut and save the image in smaller sections, you could add an animated gif to the overall map image or even a Javascript RollOver to certain linked areas. This way, as the user holds their mouse over certain hot-spots, that section of the larger image could change to another image, or replace the original image section with a small gif animation. The sections of the larger image that are 'static' links, could still be image maps, but smaller 'sectional' maps that, when put together in a table, create the appearance of a single larger image.

Here's a simple example of how you can make an Image Map somewhat interactive...

You'll notice that when your mouse is held over a link in this list, a simple Javascript image RollerOver takes place that starts an animated gif, which causes the arrow pointer to move down to the appropriate link. You can be quite creative with this idea, but keep an eye on the file sizes of your animated images. The largest animation here is the one used for 'Link #4' - 1.68kb. Less than 1 second to download on any modem. Remember, be nice to your visitors. :)

That's it for now. Have fun!

Mark Larmand (aka the Keeper), is the author of the "The Photoshop Guru's Handbook," a graphics tutorial Web site. He also heads up his own Web service company called Dreamscape Productions, which provides Web site and graphics design as well as multimedia services for the Internet and real world businesses.

Other Articles by Mark Larmand:

• Which format should I use?
  
  
• Making the Best of Both Formats
  
  
• Poking the Pixel