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

ptg16476052

230 LESSON 9: Using Images on Your Web Pages

Defining a Rectangle

Figure 9.24 shows how to obtain coordinates for rectangle regions. Note the x,y coordi-

nates for the upper-left and lower-right corners of the rectangle.

(0,0) Top Left (342,19)

Bottom right (440,318)

The

If you’re creating your imagemap manually and you’ve written down all the coordinates

for your regions and the URLs they’ll point to, you can include this information in the

client-side imagemap tags on a web page. To include a client-side imagemap inside an

HTML document, use the <map> tag, which looks like the following:

<map name="mapname"> coordinates and links </map>

The value assigned to the name attribute is the name of this map definition. This is the

name that will be used later to associate the clickable image with its corresponding coor-

dinates and hyperlink references. So, if you have multiple imagemaps on the same page,

you can have multiple <map> tags with different names.

Between the <map> and the </map> tags, enter the coordinates for each area in the image-

map and the destinations of those regions. The coordinates are defined inside yet another

new tag: the <area> tag. To define a rectangle, for example, you write the following:

<area shape="rect" coords="41,16,101,32" href="test.html">

The type of shape to be used for the region is declared by the shape attribute, which

can have the values rect, poly, circle, and default. The coordinates for each shape

FIGURE 9.24

Getting the coor-

dinates for a rect-

angle.