我正在尝试对图像http://www.dynamicdrive.com/forums/archive/index.php/t-16285.html完成同样的事情。我做不到，因为我不了解相对坐标。这里提到的解决方案说他解决了与较大国家的形象的关系，并将<area>添加到国家形象的地图。
function Show(idi){
document.getElementById("demo").innerHTML = "I am inside show function";
document.getElementById(idi).style.visibility = "visible";
}
function hide(id) {
document.getElementById("hide").innerHTML = "I am inside hide function";
document.getElementById(id).style.visibility = "hidden";
}
function clikedme(i){
document.getElementById("clicked").innerHTML = "hiee";
// document.getElementById(i).style.visibility = "visible";
document.getElementsByNameId(i).src="ch12_filled.png";
}<body>
<map name='initialmap'>
<img id="image" src="ch01ch01.png" width="453" height="453" usemap="#initialmap" style='z-index:100' />
<area alt='ch12' onmouseover="Show('12');" 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"
/>
<area alt='ch11' onmouseover="Show('11');" 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"
/>
<area alt='ch10' onmouseover="Show('10');" shape='poly' coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,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"
/>
</map>
<map name='chapter12'>
<img usemap='#chapter12' onclick="clikedme('12');" id="12" src='ch12_filled.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onmouseout='hide("12");' shape='poly' coords="152,222,142,226,135,229,129,227,135,220,125,220,88,215,66,215,52,215,47,212,47,202,50,188,54,170,65,151,76,129,82,115,92,103,100,96,110,90,122,84,123,81,135,92,123,90,144,117,181,158,176,178,174,173,190,172,185,169,162,187,187,170,160,190"
/>
<area alt='ch11' onmouseover="Show('11');" 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"
/>
<area alt='ch10' onmouseover="Show('10');" shape='poly' coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,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"
/>
</map>
<map name='chapter11'>
<img usemap='#chapter11' onclick="clikedme('11');" id="11" src='ch11_filled.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onmouseover="Show('12');" 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"
/>
<area alt='ch11' onmouseout='hide("11");' shape='poly' coords="157,237,147,236,134,235,119,236,92,242,69,246,57,247,60,242,50,244,48,250,51,269,61,297,72,318,86,338,102,359,121,375,126,378,178,300,179,309,190,285,196,280,200,273,200,266,191,255,188,247,182,236,182,232,180,229,174,231,172,232,172,239,182,249,187,261,190,266,194,272,188,278,185,283,179,280,171,273,164,263"
/>
<area alt='ch10' onmouseover="Show('10');" shape='poly' coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,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"
/>
</map>
<map name='chapter10'>
<img usemap='#chapter10' onclick="clikedme('10');" id="10" src='ch10_filled.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onmouseover="Show('12');" shape='poly' coords="152,222,142,226,135,229,129,227,135,220,125,220,88,215,66,215,52,215,47,212,47,202,50,188,54,170,65,151,76,129,82,115,92,103,100,96,110,90,122,84,123,81,135,92,123,90,144,117,181,158,176,178,174,173,190,172,185,169,162,187,187,170,160,190"
/>
<area alt='ch11' onmouseover="Show('11');" 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"
/>
<area alt='ch10' onmouseout='hide("10");' shape='poly' coords="206,273,187,310,162,379,158,372,153,387,177,399,200,403,224,405,245,405,261,405,279,398,291,393,301,389,291,364,275,342,270,320,266,313,264,308,271,304,262,292,235,295,220,297,212,297,206,295,205,299,202,289,207,279,209,275,212,273,212,279,231,279,243,277,250,274,252,273,252,269,214,270,207,269"
/>
</map>
<p id="demo"></p>
<p id="hide"></p>
<p id="clicked"></p>
</body>