问题描述:

I'm trying to use one image map multiple times. The idea is that you've got an picture with image map. You click on one area (there's a highlight on the image map), you press one and and the picture is changed. The new picture is using the same image map as the original one (only the colors change in the image).

I am trying to do exactly same thing as this link).

<script>

function changeImage() {

//var temp = document.getElementById('area1');

image1.src="ch01ch12.png";

}

</script>

<html>

<body>

<img src="http://imgur.com/SY5h8EC" class="map" width="453" id="image1" height="453" usemap="#map">

<map name="map">

<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"

onmouseover="document.getElementById('image1').src='http://imgur.com/Sch9YFq'"

onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'" onclick="changeImage();"/><area shape="poly" coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229" alt="chap11" width="453" height="453"

onmouseover="document.getElementById('image1').src='http://imgur.com/yJZSKPe'"

onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/><area shape="poly" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283,208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,265,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268" alt="chap10" width="453" height="453"

onmouseover="document.getElementById('image1').src='http://imgur.com/JWK9nSo'"

onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/><area shape="poly" coords="252,265,255,266,256,271,267,262,275,249,279,233,296,234,291,255,282,270,272,280,268,283,274,284,270,286,274,288,271,290,275,291,272,292,328,359,319,359,331,374,349,360,366,342,381,321,392,299,400,276,404,257,407,240,318,235,323,227,278,227,272,231,269,244,262,256,252,265" alt="chap9" width="453" height="453"

onmouseover="document.getElementById('image1').src='http://imgur.com/9PXeIMo'"

onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/><area shape="poly" coords="251,188,253,181,267,192,273,200,277,208,278,212,274,213,288,220,298,207,294,207,289,196,284,186,274,174,262,166,268,166,266,164,270,162,267,161,270,159,266,158,276,142,279,151,329,78,338,85,349,94,363,108,379,129,391,152,397,168,403,189,406,211,389,213,393,206,277,225,272,222,269,209,262,197,251,188" alt="chap8" width="453" height="453"

onmouseover="document.getElementById('image1').src='http://imgur.com/MCz7mgn'"

onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/><area shape="poly" coords="247,186,248,182,251,179,239,175,228,173,216,174,206,177,199,161,213,157,225,156,239,157,254,162,254,158,256,159,257,155,258,157,259,152,260,154,292,72,296,79,302,63,286,56,263,50,242,47,213,47,188,51,166,57,149,64,188,143,179,143,201,181,208,185,218,182,236,182,247,186" alt="chap7" width="453" height="453"

onmouseover="document.getElementById('image1').src='http://imgur.com/d5Clqz5'"

onmouseout="document.getElementById('image1').src='http://imgur.com/SY5h8EC'"/></map></body>

</html>

相关阅读:
Top