Quick and Dirty Guide: Easy Image Mapping, Creating Commercial Websites

For Easy Image Mapping, Client-side (or embedded) image maps offer many advantages over the NCSA and CERN types of CGI image map applications and scripts. First and foremost, client-side maps need no external references outside of the page links.

This means that they’re easily portable not only to other servers, but for offline use as well. Secondly, the actual URL link is displayed on many browsers (rather than just the coordinates), just as it is when you place your cursor over linked text and graphics. Many viewers like to see the URL, so that they know where they’re going if they choose that link.
Just as in an ISMAP MAP file, you define the areas of a client-side map with area shapes and x,y coordinates.
However, rather than keeping this information on another file, and instead of relying on a CGI application to translate the hot zones (hyperlinked areas) to links, you embed the link information within the HTML code and rely on the viewer’s browser to make the calculations and translations.

So, how do you figure out the coordinates?

Well, a very easy way is to use an application like MapThis! (included on your CD-ROM). MapThis enables you to “draw” your areas over a copy of your image, and then writes those coordinates, along with the links you specify, into a .map file (which is then ready to be used for a CGI IMAGEMAP application).

To apply this information into an HTML document as an internal (client-side) map, you simply open the MAP file in a text editor and copy the coordinates into the HTML. Here’s an example:

First you must define the area by selecting it with your cursor, as shown in Figure 12.12.

Figure 12.12. Defining an area with MapThis!

Next, double-click on that area to assign a link, as shown in Figure 12.13.

Figure 12.13. Defining a link with MapThis!

After you have done this for each area, you can generate a MAP or IMP file, which will contain text like this:

default sample.htm



# this links to 1.htm



rect 1.htm 5,64 31,94



# links to 2



rect 2.htm 42,64 68,94



# links to 3



rect 3.htm 76,64 107,94



# links to 4



rect 4.htm 114,64 144,94



# Links to 5



rect 5.htm 152,64 183,94



# links to 6



rect 6.htm 190,64 222,94



# links to 7



rect 7.htm 228,64 258,94



# links to 8



rect 8.htm 265,64 294,94

 

You now simply translate the information into the HTML client-side map and insert it into the code like this:

<MAP NAME="sample">



<!-- DEFAULT HREF="sample.htm" -->



<AREA SHAPE="RECT" HREF="1.htm" COORDS="5,64,31,94">



<AREA SHAPE="RECT" HREF="2.htm" COORDS="42,64,68,94">



<AREA SHAPE="RECT" HREF="3.htm" COORDS="76,64,107,94">



<AREA SHAPE="RECT" HREF="4.htm" COORDS="114,64,144,94">



<AREA SHAPE="RECT" HREF="5.htm" COORDS="152,64,183,94">



<AREA SHAPE="RECT" HREF="6.htm" COORDS="190,64,222,94">



<AREA SHAPE="RECT" HREF="7.htm" COORDS="228,64,258,94">



<AREA SHAPE="RECT" HREF="8.htm" COORDS="265,64,294,94">



</MAP>



<IMG SRC="sample.gif" BORDER=0 USEMAP="#sample">

 

Notice that the NCSA coordinates are set apart by a space (x,y x,y),

whereas the HTML version requires that you replace the space with a comma (x,y,x,y). Other than that, the translation is pretty straightforward.

You can also just use a bitmap graphics tool (like Paint Shop Pro) to get your information—especially if you are just using the rectangle (“RECT”) shape. Simply use the application’s selection tool and copy the coordinates of the selected area. This is often the fastest way to make a map.

Summary

 

Used wisely, graphics can not only make your page more interesting to look at, they also can add power to the message you are trying to convey.

In this chapter we have covered the following topics:

  • Communicating with graphics
  • Graphics conversion for the Web
  • Effective use of graphics
  • Graphics formats
  • Hints on color and quality
  • Image placement
  • Directory structure
  • Graphics without graphics
  • Creating thumbnails
  • Easy image mapping

Leave a Reply

Your email address will not be published. Required fields are marked *