I have an image map that is part of a fairly large html form that highlights an image when you click on it. http://www.alyciastaggs.com/teethtest.html. I would like to add a value to every image and pass it to a text box when it is clicked. This is the code:
<script type=“text/javascript”>
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments*].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
teeth24 = newImage("…/_images/teeth/teeth24.jpg");
teeth25 = newImage("…/_images/teeth/teeth25.jpg");
teeth26 = newImage("…/_images/teeth/teeth26.jpg");
teeth27 = newImage("…/_images/teeth/teeth27.jpg");
teeth28 = newImage("…/_images/teeth/teeth28.jpg");
teeth29 = newImage("…/_images/teeth/teeth29.jpg");
teeth30 = newImage("…/_images/teeth/teeth30.jpg");
teeth31 = newImage("…/_images/teeth/teeth31.jpg");
teeth32 = newImage("…/_images/teeth/teeth32.jpg");
teeth1 = newImage("…/_images/teeth/teeth1.jpg");
teeth2 = newImage("…/_images/teeth/teeth2.jpg");
teeth3 = newImage("…/_images/teeth/teeth3.jpg");
teeth4 = newImage("…/_images/teeth/teeth4.jpg");
teeth5 = newImage("…/_images/teeth/teeth5.jpg");
teeth6 = newImage("…/_images/teeth/teeth6.jpg");
teeth7 = newImage("…/_images/teeth/teeth7.jpg");
teeth8 = newImage("…/_images/teeth/teeth8.jpg");
teeth9 = newImage("…/_images/teeth/teeth9.jpg");
teeth10 = newImage("…/_images/teeth/teeth10.jpg");
teeth11 = newImage("…/_images/teeth/teeth11.jpg");
teeth12 = newImage("…/_images/teeth/teeth12.jpg");
teeth13 = newImage("…/_images/teeth/teeth13.jpg");
teeth14 = newImage("…/_images/teeth/teeth14.jpg");
teeth15 = newImage("…/_images/teeth/teeth15.jpg");
teeth16 = newImage("…/_images/teeth/teeth16.jpg");
teeth17 = newImage("…/_images/teeth/teeth17.jpg");
teeth18 = newImage("…/_images/teeth/teeth18.jpg");
teeth19 = newImage("…/_images/teeth/teeth19.jpg");
teeth20 = newImage("…/_images/teeth/teeth20.jpg");
teeth21 = newImage("…/_images/teeth/teeth21.jpg");
teeth22 = newImage("…/_images/teeth/teeth22.jpg");
teeth23 = newImage("…/_images/teeth/teeth23.jpg");
preloadFlag = true;
}
}
</script>
</head>
<body onload=“preloadImages();”>
<table border=“0” cellpadding=“0” cellspacing=“0” width=“612px;” style=“padding-bottom: 30px;”>
<tr>
<td><a name=“tooth”><img name=“teeth” src="…/_images/teeth.jpg" width=“200” height=“293” border=“0” alt="" usemap="#teethMap"></a>
<map name=“teethMap”>
<area shape=“poly” alt="" coords=“22,168, 20,166, 20,163, 21,159, 24,155, 28,154, 35,154, 38,156, 40,160, 41,163, 42,166, 42,169, 41,172, 38,174, 31,176, 26,176, 23,173, 22,169, 21,167” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth32.jpg’);”>
<area shape=“poly” alt="" coords=“26,188, 26,183, 27,179, 31,176, 36,175, 42,175, 45,178, 44,183, 46,184, 48,188, 46,192, 42,194, 39,195, 36,197, 31,196, 28,194, 26,193, 27,188” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth31.jpg’);”>
<area shape=“poly” alt="" coords=“34,212, 32,209, 31,207, 32,202, 35,198, 41,195, 46,194, 49,195, 52,200, 53,201, 55,204, 56,207, 55,212, 53,215, 47,218, 44,219, 39,218, 35,215, 35,212” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth30.jpg’);”>
<area shape=“poly” alt="" coords=“43,221, 42,222, 42,227, 45,231, 51,232, 57,229, 59,226, 59,223, 57,221, 56,220, 57,218, 55,216, 53,215, 49,217, 43,220” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth29.jpg’);”>
<area shape=“poly” alt="" coords=“60,246, 56,245, 51,245, 49,243, 47,240, 47,235, 51,232, 56,231, 62,231, 65,234, 66,237, 65,240, 64,244, 59,246” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth28.jpg’);”>
<area shape=“poly” alt="" coords=“59,247, 57,251, 57,254, 59,256, 65,257, 70,258, 71,257, 74,252, 75,245, 73,242, 72,241, 67,242, 61,246” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth27.jpg’);”>
<area shape=“poly” alt="" coords=“71,259, 71,256, 74,253, 80,248, 82,247, 83,248, 84,250, 85,254, 85,258, 83,263, 80,264, 73,262, 71,259, 71,257” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth26.jpg’);”>
<area shape=“poly” alt="" coords=“84,263, 83,262, 86,257, 89,251, 92,249, 94,250, 96,253, 97,257, 97,264, 94,266, 89,265” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth25.jpg’);”>
<area shape=“poly” alt="" coords=“97,264, 97,256, 99,252, 101,250, 104,250, 108,255, 110,263, 109,264, 106,265, 101,266, 97,264” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth24.jpg’);”>
<area shape=“poly” alt="" coords=“109,260, 109,255, 109,251, 112,248, 113,247, 118,251, 122,256, 124,259, 123,260, 121,262, 118,263, 114,264, 110,263, 109,260” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth23.jpg’);”>
<area shape=“poly” alt="" coords=“121,253, 119,249, 119,245, 121,242, 124,242, 131,245, 136,249, 137,253, 136,256, 133,258, 128,258, 124,258, 122,255, 121,252” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth22.jpg’);”>
<area shape=“poly” alt="" coords=“129,238, 128,236, 129,233, 132,231, 137,231, 144,233, 146,236, 147,239, 147,243, 144,245, 139,246, 135,247, 131,245, 129,242” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth21.jpg’);”>
<area shape=“poly” alt="" coords=“138,221, 138,218, 141,216, 144,217, 150,220, 152,223, 152,229, 150,232, 146,233, 143,232, 140,232, 135,228, 135,224, 137,222” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth20.jpg’);”>
<area shape=“poly” alt="" coords=“142,202, 144,198, 149,195, 153,196, 160,199, 163,205, 164,208, 163,211, 160,211, 160,215, 157,218, 154,220, 148,219, 143,217, 140,214, 139,210, 140,205” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth19.jpg’);”>
<area shape=“poly” alt="" coords=“150,183, 150,180, 151,177, 152,176, 156,175, 164,178, 168,181, 169,185, 168,188, 168,190, 168,194, 164,197, 160,198, 157,198, 153,195, 149,193, 148,190, 148,187, 150,185, 151,184” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth18.jpg’);”>
<area shape=“poly” alt="" coords=“153,172, 152,169, 153,164, 154,160, 157,156, 162,155, 168,155, 172,158, 173,161, 175,166, 173,169, 172,173, 170,176, 167,178, 164,178, 157,176, 154,173” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth17.jpg’);”>
<area shape=“poly” alt="" coords=“156,125, 156,122, 160,119, 164,117, 173,116, 179,116, 180,120, 179,123, 179,124, 180,127, 176,130, 172,132, 167,133, 162,132, 157,128” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth16.jpg’);”>
<area shape=“poly” alt="" coords=“154,111, 152,108, 152,105, 154,101, 157,99, 167,96, 173,97, 178,99, 177,103, 177,108, 177,111, 172,115, 166,117, 158,117, 155,115, 154,112” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth15.jpg’);”>
<area shape=“poly” alt="" coords=“149,92, 147,90, 146,87, 146,84, 152,78, 161,76, 165,75, 167,76, 169,80, 173,82, 173,85, 173,89, 170,93, 165,97, 157,99, 153,98, 150,97, 148,94, 149,93” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth14.jpg’);”>
<area shape=“poly” alt="" coords=“143,73, 143,70, 145,66, 153,61, 157,61, 160,64, 163,66, 163,69, 162,71, 160,76, 154,77, 149,78, 146,76, 144,73, 143,70” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth13.jpg’);”>
<area shape=“poly” alt="" coords=“136,59, 138,55, 142,51, 149,49, 152,49, 155,53, 157,57, 154,60, 151,63, 147,65, 140,64, 138,61” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth12.jpg’);”>
<area shape=“poly” alt="" coords=“131,50, 131,41, 134,34, 137,33, 143,36, 149,40, 148,48, 144,50, 139,52, 132,52, 131,49” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth11.jpg’);”>
<area shape=“poly” alt="" coords=“120,30, 120,27, 122,26, 132,31, 132,34, 131,41, 128,46, 125,47, 123,46, 120,37” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth10.jpg’);”>
<area shape=“poly” alt="" coords=“98,22, 101,21, 110,21, 116,23, 119,25, 120,26, 119,34, 115,40, 113,41, 109,41, 106,38, 103,34, 102,30, 99,28” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth9.jpg’);”>
<area shape=“poly” alt="" coords=“77,26, 79,23, 86,21, 97,21, 98,23, 98,26, 97,29, 97,30, 95,31, 93,34, 92,36, 89,39, 86,41, 82,40, 80,38, 79,34, 77,30” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth8.jpg’);”>
<area shape=“poly” alt="" coords=“64,30, 73,26, 77,26, 77,33, 76,39, 74,44, 71,46, 68,43, 65,38, 63,33” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth7.jpg’);”>
<area shape=“poly” alt="" coords=“49,48, 48,43, 49,40, 54,35, 59,33, 63,33, 64,37, 65,42, 65,47, 65,49, 63,52, 57,51” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth6.jpg’);”>
<area shape=“poly” alt="" coords=“41,55, 42,51, 45,48, 49,48, 53,49, 57,52, 60,55, 60,57, 60,60, 57,63, 55,64, 49,63, 44,60” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth5.jpg’);”>
<area shape=“poly” alt="" coords=“37,74, 35,72, 35,70, 34,67, 34,65, 39,62, 41,60, 45,60, 48,63, 50,63, 53,66, 54,69, 54,71, 52,74, 49,77, 45,77” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth4.jpg’);”>
<area shape=“poly” alt="" coords=“30,95, 26,92, 24,88, 24,85, 23,83, 24,81, 26,79, 29,77, 30,75, 32,74, 34,74, 42,76, 47,79, 50,84, 51,86, 50,88, 49,90, 47,91, 47,91, 47,94, 47,96, 44,97, 40,97” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth3.jpg’);”>
<area shape=“poly” alt="" coords=“19,105, 18,99, 22,96, 27,95, 31,95, 39,98, 44,101, 45,105, 45,108, 43,110, 43,110, 42,112, 42,114, 39,116, 36,117, 27,115, 21,112, 19,108” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth2.jpg’);”>
<area shape=“poly” alt="" coords=“17,122, 16,118, 19,115, 24,114, 31,116, 36,117, 40,121, 41,123, 39,128, 35,130, 31,132, 24,131, 18,127, 17,124” href="#tooth"
onclick=“changeImages(‘teeth’, ‘…/_images/teeth/teeth1.jpg’);”>
</map></td>
</tr>
<tr>
<td><input type=“text” name=“imageVal” size=“20” /></td>
</tr>
</table>
Any help or direction would be much appreciated!
