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.
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