HTML Tutorials: Imagemaps
Imagemaps allow you to add clickable regions
to an image using only HTML. They are sometimes less efficient
than slicing up an image into a group of smaller images,
especially if you plan to use Javascript roll-overs in conjuction
with them. However, for irregular shaped objects and creative
designs, imagemaps are still very useful. The following method
demonstrates how to create client-side imagemaps. (Note:
There is also an older variety of imagemaps called server-side
imagemaps, but they are less efficient and no longer sensible
to use). In the body area of your HTML, create a <map> tag
and name it like so:
<map name="testmap">
Next, you need to create <area> tags
for each clickable area you wish to put on your image. Each
area tag as the following three attributes:
-
shape - defines the shape of the clickable area.
The choices are "rect" (rectangular), "circle" (circular),
and "poly" (polygonal). The default attribute
is "rect,"
so it is unnecessary to define a shape if you are making
a rectangular area.
-
coords - defines the pixel coordinates of the
area. These can be found using most any image editing
program. (If you are using Photoshop, they can found
in the Info Palette.) For rectangles, give the x,y coordinates
of the top-left corner followed by that of the bottom-right
corner (see example below). For circles, give the x,y
coordinates of the center followed by the radius in pixels.
For polygons, list the x,y coordinates of all the verticies
of the polygon in connect-the-dots order.
-
href - defines the page the area will link to
when clicked. It works just like a standard <a href> tag.
The <area> tags do not need closing tags, but the <map> tag
does, so make sure to add a </map> after you finish
creating your clickable areas. Here is an example of a full
imagemap code:
<map name="testmap">
<area coords="22,22,113,51" href="link1.htm">
<area shape="circle" coords="38,67,13" href="link2.htm">
<area shape="poly" coords="145,9, 156,37,
182,37, 175,9"
href="link3.htm">
</map>
The final step is to tell an image to use
your imagemap. Do this by inserting a "usemap" attribute
to an image's <img>
tag. Make sure to use a quot;#quot; symbol:
<img src="spoonodelicimage.gif" usemap="#testmap"
border=0>
The following is the imagemap created by
using the example code:
|
