HTML and CSS Reference
In-Depth Information
The Mapedit program for Windows, Linux, and the Mac OS 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 graphics 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.25 shows the three types of shapes
that you can specify in an imagemap: circles, rectangles, and polygons.
FIGURE 9.25
Three types of
shapes are avail-
able for creating
imagemaps.
A polygonal region
A circular 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.26 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 mea-
surement and defines the number of pixels from the top of the image.
