mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-10 18:00:15 +01:00
66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
|
<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>
|
||
|
|
|
||
|
|
|