html"
?? alt="A triangle" />
Each of the preceding area elements has a shape attribute that corresponds to the
intended active link area:
rect defines a rectangular area; the coords (coordinates) attribute contains two
pairs that define the top-left and bottom-right corners of the rectangle in terms of
pixel values (which you either take from your original image or guess, should you
have amazing pixel-perfect vision).
circle is used to define a circular area; of the three values within the coords
attribute, the first two define the horizontal and vertical position of the circle??™s
center, and the third defines the radius.
poly enables you to define as many coordinate pairs as you wish, which allows you
to define active areas for complex and irregular shapes??”in the previous code
block, there are three pairs, each of which defines a corner of the triangle.
Creating image maps is a notoriously tedious process, and it??™s one of the few occasions
when I advise using a visual web design tool, if you have one handy, which can be used to
drag out hot-spots. However, take care not to overlap defined regions??”this is easy to do,
and it can cause problems with regard to each link??™s active area. If you don??™t have such a
tool handy, you??™ll have to measure out the coordinates in a graphics package.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
176
Faking images maps using CSS
Although there??™s no direct equivalent to image maps in CSS, you can fashion a similar
effect by creating block-level anchors (rather like the one in the pop-up example).
Pages:
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268