HyperGraphics

line.gif

The images presented in the initial example of this chapter are active in terms of hypertext. However, these images are not hypergrahics in the sense that different portions of the image lead to different locations. The term hypergraphics is used to mean that an image may contain a number of different hotspots, each of which performs a (possibly different) hypertext link.

To describe the hotspot areas within an image, the tag map is used. An easy example of where this is of use is a document index. It is more efficient to have one GIF containing the alphabet than to have 26 different GIFs - one for each letter of the alphabet. The image ../gif/alpha.gif contains the letters of the alphabet and is shown below.

A map can be defined and applied to the above bitmap as shown below

<map name=imap>
<area shape=rect coords="  0, 0  15, 22" href=index_a.htm>
<area shape=rect coords=" 16, 0  31, 22" href=index_b.htm>
<area shape=rect coords=" 32, 0  47, 22" href=index_c.htm>
<area shape=rect coords=" 48, 0  63, 22" href=index_d.htm>
<area shape=rect coords=" 64, 0  79, 22" href=index_e.htm>
<area shape=rect coords=" 80, 0  95, 22" href=index_f.htm>
<area shape=rect coords=" 96, 0 113, 22" href=index_g.htm>
<area shape=rect coords="112, 0 127, 22" href=index_h.htm>
<area shape=rect coords="128, 0 143, 22" href=index_i.htm>
<area shape=rect coords="144, 0 159, 22" href=index_j.htm>
<area shape=rect coords="160, 0 175, 22" href=index_k.htm>
<area shape=rect coords="176, 0 191, 22" href=index_l.htm>
<area shape=rect coords="192, 0 207, 22" href=index_m.htm>
<area shape=rect coords="208, 0 223, 22" href=index_n.htm>
<area shape=rect coords="224, 0 239, 22" href=index_o.htm>
<area shape=rect coords="240, 0 255, 22" href=index_p.htm>
<area shape=rect coords="256, 0 271, 22" href=index_q.htm>
<area shape=rect coords="272, 0 287, 22" href=index_r.htm>
<area shape=rect coords="288, 0 303, 22" href=index_s.htm>
<area shape=rect coords="304, 0 319, 22" href=index_t.htm>
<area shape=rect coords="320, 0 335, 22" href=index_u.htm>
<area shape=rect coords="336, 0 351, 22" href=index_v.htm>
<area shape=rect coords="352, 0 367, 22" href=index_w.htm>
<area shape=rect coords="368, 0 383, 22" href=index_x.htm>
<area shape=rect coords="384, 0 399, 22" href=index_y.htm>
<area shape=rect coords="400, 0 416, 22" href=index_z.htm>
</map>
<img src=../gif/alpha.gif width=417 height=22 border=0 usemap=#imap>

The resulting active hypergrahic is shown below. You can click on some of the letters and see the result. Use the back button to return.

That's it for images. The next chapter next.gif discusses HTML tables.