Wednesday, July 2, 2008

Image Maps

Client-side image maps are better than server-side image maps.
To make an image a client-side map, use the attribute usemapin the img tag. Its value should be the url anchor of a <map> element. The <map> element can either be in the same page or in an external one.
The map tag contains the <area /> tags. The area tags use the coords attribute to define the area that can be clicked. The coordinates are with respect to the top left corner of the image. The clickable areas can be circles, rectangles or polygons. The clickable area is specified in the shape attribute as either circle, rectangle, or polygon. You can also use the short-forms circ, rect and poly.
For circles, coords="x, y, r" where x and y is the center and r is the radius.
For rectangles, coords="x1, y1, x2, y2" - the first coordinate is the upper-left corner and the second is the bottom-right corner.
For polygons: coords="x1,y1,x2,y2,x3,y3..." the first coordinate should not be repeated.
Finally, the href attribute specifies the link and the alt attribute the alternate text.

No comments: