Client Side Image Maps
Element: <map> Start tag: required End tag: required Attributes: name. more attribute info here
Element: <area> Start tag: required End tag: forbidden Attributes: id, class, lang, dir, title, style, name, alt, href, target, tabindex, accesskey, shape, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, more attribute info here
Image maps allow you to map off areas of a single image and assign a link
to each area. The three area shapes are rect for a rectangle, circle for
a circle, and polygon for a polygon (areas with odd shapes).
In an image map the tag <area> is within the tags <map> and </map>.
You need to use the attribute name in the <map> tag to identify the map.
The attributes of <area> are: shape, coords, href, and alt. shape is used to
specify what shape your area is going to be by setting it to either: rect, circle, or
poly. coords is used to input the X,Y coordinates of the area. href is used to
specify the URL to load when the area is clicked. alt is used to specify the
alternate text for the area. You also need to make your image tag as usual and add the
attribute usemap="#mapName".
<img src="image.gif" width="130" height="110" alt="someText" usemap="#mapName">
<map name="mapName">
<area shape="rect" coords="x1, y1, x2, y2" href="page.html" alt="Alternate Text Here">
</map>
How to find the Coordinates
There are two ways to find the X,Y coordinates in an image. The first is to use a graphics
program by moving your mouse over the place on the image and looking somewhere for a set
of numbers that change as you move the mouse. The second way is to use your browser.
Make your image a link, and then add the attribute ISMAP to your image tag. Load
the page with this markup into your browser, and get the X,Y by looking at the set of
numbers in the status bar.
<a href="">
<img src="image.gif" width="130" height="110" alt="someText" ISMAP>
</a>
Rectangle (rect)
To make a rectangular area find the coordinates of the top left corner of the area, and
then the bottom right corner. Put the coordinates in the coords attribute separated by
comma's.
<map name="rect">
<area shape="rect" coords="x1, y1, x2, y2" href="page.html" alt="Alternate Text Here">
</map>
Circle
To make a circular area find the coordinates of the center of the area, and
then the left center. Put the first coordinates in as normal, and subtract the first
number from the second set of coordinates from the first number of the first set of
coordinates. That makes your third variable and the radius of the circle.
<map name="circle">
<area shape="circle" coords="x, y, r" href="page.html" alt="Alternate Text Here=">
</map>
Polygon
Polygons are almost the same as the rectangle, except you can have as many coordinates
as you wish and the area can have any shape. Simply put all the coordinates in and you
are done.
<map name="poly">
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6, x7, y7" href="page.html" alt="Alternate Text Here">
</map>
