1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<HTML>
<BODY>
<H1>Map and area element test</H1>
<P>
<IMG SRC="mapimg87.gif" USEMAP="#firstmap" BORDER=0 ALT="This is a tooltip">
<MAP NAME=firstmap>
<AREA SHAPE=rect ID="upper_left" COORDS="12,15,82,86" HREF=up_left.htm >
<AREA SHAPE=rect ID="middle_middle" COORDS="122,103,191,172" HREF=mid_mid.htm >
<AREA SHAPE=rect ID="lower_middle" COORDS="121,192,192,261" HREF=low_mid.htm >
<AREA SHAPE=circle ID="upper_middle" COORDS="157,52,33" HREF=up_mid.htm >
<AREA SHAPE=circle ID="middle_left" COORDS="47,135,33" HREF=mid_left.htm >
<AREA SHAPE=circle ID="lower_right" COORDS="259,227,34" HREF=low_rt.htm >
<AREA SHAPE=poly ID="lower_left" COORDS="57,198,23,221,23,241,58,265,93,241,93,221" HREF=low_left.htm >
<AREA SHAPE=poly ID="middle_right" COORDS="264,106,232,127,230,148,264,171,298,148,298,126" HREF=mid_rt.htm >
<AREA SHAPE=poly ID="upper_right" COORDS="261,18,226,41,226,59,263,85,295,59,296,38" HREF=up_rt.htm >
<AREA SHAPE=poly ID="left_brown" COORDS="89,8,89,156,5,193,9,223,63,190,97,214,97,246,62,274,109,275,109,98,140,97" HREF = left_brn.htm >
<AREA SHAPE=poly ID="top_brown" COORDS="94,4,105,22,166,11,164,5" HREF=top_brn.htm >
<AREA SHAPE=poly ID="right_brown" COORDS="168,5,169,11,194,33,194,257,265,283,265,270,220,247,220,200,255,179,227,158,227,123,265,98,221,68,220,36,269,6" HREF=rt_brn.htm >
<AREA SHAPE=default HREF="default.htm">
</MAP>
</P>
<FORM>
<P>
Set the
<SELECT SIZE="1" NAME="nth">
<SCRIPT>
var m = document.getElementsByTagName("MAP")[0];
var a = m.areas;
for (var i = 0; i < a.length-1; i++) {
document.write("\<OPTION VALUE=\'" + a[i].id + "\'>" + a[i].id + "\</OPTION>");
}
</SCRIPT>
</SELECT>
element's
</P>
<P>
shape attribute to
<SELECT SIZE="1" NAME="shape">
<OPTION SELECTED VALUE="rect">rect</OPTION>
<OPTION VALUE="circle">circle</OPTION>
<OPTION VALUE="poly">poly</OPTION>
<OPTION VALUE="default">default</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Shape" onClick="changeElementShape(); return true;">
(turn on visual debugging in the viewer to see the area boundaries)
</P>
</FORM>
<SCRIPT>
var nth = new Array("upper_left", "middle_middle", "lower_middle",
"upper_middle", "middle_left", "lower_right",
"lower_left", "middle_right", "upper_right",
"left_brown", "top_brown", "right_brown");
var shapes = new Array("rect", "circle", "poly", "default");
function changeElementShape() {
var area = document.getElementById(nth[document.forms[0].nth.selectedIndex]);
area.shape = shapes[document.forms[0].shape.selectedIndex];
}
</SCRIPT>
</BODY>
</HTML>
|
