Try out an image map, click on the image!
An image map is a graphic with defined areas, each with it's own HTML link. Image maps are most commonly used for navigation bars.
The type of image map described here is referred to as a client side image map. This means that the image map code is included right
in the web page text.
Including an image map in a web page requires some home work. Before
adding the code to your web page text you must make a note of the links
you wish to create and the coordinates of the areas within your image.
There are many utilities that will do this for you. We recommend that you download an image mapping utility from
Tucows. Any of these
utilities will allow you to load the image and using a point and click
graphic interface, define areas and assign HTML links to each. They will
even create the code for your web page (as described here) so that you just have to insert the code into your web page.
Once you have the image, links and coordinates ready you simply have to
insert them into your web page. The image tag must include the
usemap directive. Using our example from above the image tag
looks like this:
<IMG SRC="http://www.aloak.com/images/imagmap.gif" USEMAP="#imap1">
The map is then defined with a line for each area between a map start and
a map end tag. The text below demonstrates the code used for the image
map above. The start tag simply includes the map name as referred to in
the usemap directive. Each area is then defined using an area tag which includes the shape, coordinates and a link definition (href). Each coordinate is specified using
a number pair consisting of the
pixels horizontally and vertically from the top left of the image. In
the case of a rectangle, two points are defined, the upper left and the
lower right of the rectangle.
Notice that there is a default area defined. This is optional, it creates a link for the parts of the image
not explicitly mapped to a defined area. Finally the map definition ends with the map end tag.
<AREA SHAPE="RECT" COORDS="16,9,100,45" HREF="/index.html">
<AREA SHAPE="RECT" COORDS="27,92,93,126" HREF="../info/index.html">
<AREA SHAPE="DEFAULT" HREF="../info/imagemap.shtml">
More detailed information on client side image maps can be found at the
World Wide Web Consortium.