|
Member of:
 ISOC
 IWA
 ARTT
 RTS
| |
Image Maps
Image maps are one of the most-used and least-understood display functions
used in Web development. Although they have been around for ages, very few
people understand the concept and the creation of image maps. In short,
image maps are navigation tools that allow hyperlinking from within an image
environment. A good example is actually a map, where you could click a city
to take you to a page about that city.
Here's how it works. The image is really a coordinate of cells, with a block
of cells designated to hyperlink to a particular page. To create an image
map, your best bet is to get an image map editor, but you can code them by
hand. Here's how:
<IMG SRC="theimage.gif"
WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">
<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.htm">
<area shape="rect" coords="101,1,200,50" href="page2.htm">
<area shape="rect" coords="201,1,300,50" href="page3.htm">
<area shape="rect" coords="301,1,400,50" href="mailto:you@yourserver.com">
</map>
The above code cuts up the image into 4 pieces for different links. The "coords"
are the pixels of the image (the cells) X-start, Y-start, X-end, Y-end So
our first link starts at pixel 1 width and 1 height and ends at 100 width
and 50 height. (Remember width starts at left and height at top.)
| |
|