|
Client-side
image-maps
.
Image maps work with Gif's and Jjpeg's and allow you to specify certain
areas in the image as links to a new URL or anchor point (another place
in the same document).
The
specification of "hot areas" works by defining these with a shape qualifyer
as well as a set of carthesian co-ordinates which are always "x"(horizontal)
first and "y" (vertical) next. The co-ordinates are seperated by comma's.
| Rectangle
or square |
rect |
top
left "x" first,then "y",bottom right "x " first ,then "y" |
| Circle |
circle |
top
left "x" first,then "y",bottom right "x " first ,then "y" |
| Ellipse |
oval |
top
left "x" first,then "y",bottom right "x " first ,then "y" |
| Polygon |
poly |
First
and last points must be the same, other than that you can explain
a poygon of any shape by sequentially stating the co-ordinate points
using top left "x" first,then "y",bottom right "x " first ,then "y" |
| Point |
point |
"x"
first,then "y" |
|
Imagemap
code resides below the "body" tag in a document and looks like
this:
<map
name="1">
<area shape="rect" coords="8,66,149,81"
href="page4.htm" onmouseover="dmim('Page 4'); return
document.returnValue;" onmouseout="dmim(''); return
document.returnValue;"
target="_self">
<area shape="rect" coords="8,49,148,64"
href="page3.htm" onmouseover="dmim('Page 3'); return
document.returnValue;" onmouseout="dmim(''); return
document.returnValue;"
target="_self">
<area shape="rect" coords="8,32,147,48"
href="page2.htm" onmouseover="dmim('Page 2'); return
document.returnValue;" onmouseout="dmim(''); return
document.returnValue;"
target="_self">
<AREA SHAPE="DEFAULT" NOHREF>
</map>
|
This is the code above at work:
here
|