我正在尝试多次使用一张图片地图。这个想法是你有一张带有图像地图的图片。您单击一个区域（图像地图上有一个突出显示），按一个区域并更改图片。新图片使用与原始图片相同的图像映射（仅图像中的颜色发生变化）。 我试图做与此链接完全相同的事情。）
<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>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight();
});</script>
<script type="text/javascript src="src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$('#area1').click(function () {
$("#image1").show();
});
});
$(function() {
$('#area1').click(function(){
$("#image1").attr('src',"ch01ch12.png");
$("#image1").parent().css('background-image',"url(ch01ch12.png)");
return false;
});
</script>
<script>
function changeImage() {
var temp = document.getElementById('image1');
temp.src="ch01ch12.png";
}
</script> <html>
<body>
<img src="ch01ch01.png" 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='ch01ch12.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"
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='ch01ch11.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<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='ch01ch10.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<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='ch01ch09.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<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='ch01ch08.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<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='ch01ch07.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="156,234,156,226,154,222,154,226,150,223,150,226,147,224,148,227,130,227,135,220,47,213,31,223,16,212,15,226,16,236,16,243,33,254,48,243,66,240,61,248,148,233,147,236,151,234,151,237,153,234,154,239,156,234" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="205,264,207,268,203,272,162,380,158,372,151,389,154,407,136,417,124,412,115,406,108,401,125,394,125,375,174,302,179,309,200,271,201,266,205,264" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="261,288,260,291,263,290,262,295,264,293,264,297,266,295,275,309,266,309,305,389,321,397,319,415,330,412,341,405,347,400,347,379,330,374,318,359,328,359,272,292,274,291,271,289,275,288,269,287,273,284,267,284,261,288" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="271,227,273,223,277,225,393,206,388,214,407,211,420,200,436,210,438,218,438,229,437,242,422,231,406,240,318,235,323,227,277,227,274,230,271,227" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="271,227,273,223,277,225,393,206,388,214,407,211,420,200,436,210,438,218,438,229,437,242,422,231,406,240,318,235,323,227,277,227,274,230,271,227" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
<area shape="poly" coords="256,163,262,166,267,165,265,164,269,162,266,161,269,159,266,158,276,142,279,150,329,78,329,59,344,51,333,45,323,39,316,36,300,45,303,63,296,80,292,72,260,154,259,153,259,158,256,155,257,159,254,158,256,163" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="199,191,203,188,207,192,205,187,207,185,202,182,178,142,188,143,149,64,133,55,133,37,122,44,112,49,107,53,107,73,123,78,135,93,126,93,199,183,199,191" alt="chap6" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch06.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="16,212,31,223,47,214,50,189,55,169,62,152,70,136,81,120,92,107,105,93,118,82,123,79,107,73,107,54,91,65,73,83,57,101,45,119,36,137,27,158,20,183,17,202,16,212" alt="chap5" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch05.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="108,401,125,394,125,375,112,366,97,352,83,336,69,316,61,298,54,280,49,261,47,243,33,255,16,244,20,270,27,293,34,313,45,334,57,352,71,369,88,385,108,401" alt="chap5" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch05.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="305,389,321,398,319,415,290,427,265,433,237,436,208,436,181,432,159,426,136,417,154,407,151,391,171,399,192,404,213,407,236,407,261,404,280,399,296,393,305,389" alt="chap5" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch05.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="406,240,423,231,437,242,434,264,429,285,424,302,416,320,404,341,390,360,375,376,357,391,347,399,347,380,331,374,345,363,358,350,370,336,380,323,387,309,395,294,399,279,403,265,406,247,406,240" alt="chap5" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch05.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
<area shape="poly" coords="329,77,328,58,344,52,363,66,383,85,396,101,410,123,421,144,428,164,433,182,436,199,436,210,420,200,406,211,404,191,398,169,390,149,380,131,365,110,352,97,339,86,329,77" alt="chap5" width="453" height="453"
onmouseover="document.getElementById('image1').src='ch01ch05.png'"
onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>
</map>
</body>
</html>
<html>
<body>
<img src="C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png" 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='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch12.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"
href="javascript:function(1)"/>
<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='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch11.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
<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='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch10.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
</map>
</body>
</html>