Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

228 LESSON 9: Using Images on Your Web Pages

The Mapedit program for Windows, Linux, and Mac OS X can help you create client-

side imagemaps. You can find it online at http://www.boutell.com/mapedit/. In addition,

many of the latest WYSIWYG editors for HTML pages and web grap hics enable you to

generate imagemaps. There’s a web-based editor for imagemaps that you can try out at

http://www.image-maps.com/; it creates both imagemaps and the CSS equivalents.

If you must create your imagemaps by hand, here’s how. First, make a sketch of the

regions that will be active on your image. Figure 9.21 shows the three types o f shapes

that you can specify in an imagemap: circles, rectangles, and polygons.

A circular region A polygonal region

A rectangular region

You next need to determine the coordinates for the endpoints of those regions. Most

image-editing programs have an option that displays the coordinates of the current mouse

position. Use this feature to note the appropriate coordinates. (All the mapping programs

mentioned previously will create the <map> tag for you, but for now, following the steps

manually will help you better understand the processes involved.)

Defining a Polygon

Figure 9.22 shows the x,y coordinates of a polygon region. These values are based on

their positions from the upper-left corner of the image, which is coordinate 0,0. The first

number in the coordinate pair indicates the x value and defines the number of pixels from

the extreme left of the image. The second number in the pair indicates the y measurement

and defines the number of pixels from the top of the image.

FIGURE 9.21

Three types of

shapes are avail-

able for creating

imagemaps.