Clickable maps are used to visually navigate within a Web site. Generally, you see the clickable map on the main page or index page. The concept of a clickable map replaces that of an ordinary unordered URL list. For example, suppose you have five separate organizations in your site. You can display links either like this:
<UL> <LI><A HREF="sales.html">Sales</A> <LI><A HREF="service.html">Service</A> <LI><A HREF="support.html">Support</A> <LI><A HREF="training.html">Training</A> <LI><A HREF="technical.html">Technical Information</A> </UL>
Or you can put a pretty picture in place of this list and provide a nicer look and feel. Images are nice, but there are still some issues regarding limited bandwidth. This section explains how to create a clickable image map, as well as some tips on how to reduce your image byte size for those users viewing your page through a slower modem.
To create a clickable map, you first need to create an image. Once you have an image, you need to determine which portion of an image will navigate to some specific URL when clicked. This is called your image map. When the user clicks on the image, a point is returned in pixel coordinates, which might correspond to an area defined in your image map. This area is associated with a specific URL that will be retrieved.
Creating an Image
The preferred image formats for the Web are JPEG and GIF. GIFs are nice because they provide transparency, which allows the background color of your page to seep through the image. This is especially useful if your image is not an ordinary rectangle. Because of the way in which GIFs are compressed, you will get a better compression ratio if you have large areas of a continuous single color. Images with dithered colors, for example, will not compress well in the GIF format. The JPEG format, which is intended for photographic scans, does a better job at compressing these types of images. It is important that you choose the correct format for your image. As a rule, you might consider that 16- or 4-color images be done in the GIF format, and images with a greater color depth be implemented in JPEG format. I suggest that you try different approaches with your image until you find that perfect nirvana of smallest byte size together with the greatest quality for your image. A product such as Adobe PhotoShop is perfect for this type of work.
There are some things you can do to reduce the byte size of your image. The most important thing is to choose the appropriate format for your image, as described in the previous paragraph. Once you have the proper format for your image, you can work on reducing the size by limiting the color depth to the actual number of colors you need. Most images will look fine with 16 or 256 colors. You need to go above that only for photographic scans. You can customize the palette of colors for your image if necessary. Another way to reduce byte size, of course, is to reduce the physical size of the image. If you are using the GIF format, yet another way to reduce image size is by designing the image with large areas of continuous color. As mentioned earlier, this increases the effectiveness of the GIF compression algorithm.