イメージマップを使用しているため、新しいイメージが古いイメージを置き換えます。

Question

現在、イメージマップを使用してイメージを置き換えようとしています。最初のイメージは2番目のイメージに置き換えられますが、私は2番目のイメージを置き換えるために3番目のイメージを得ることに運がない。

のjavascript：

<script> 
     dcoument.getElementById("img1").src="MSWORD.jpg"; 
     document.getElementById("img2").src="ClickFile.png"; 
     documnet.getElementById("img3").src="NewFile.png" 

     function replaceImage(imgid, source, mapid) 
     { 
      var image = document.getElementById(imgid); 
      image.src= source; 
      var newmap = document.getElementById(mapid); 
      var origin = document.getElementById("ClickFile"); 
      origin.innerHTML = newmap.innerHTML; 
     } 
    </script> 

のHTML5

   <img id="img1" src="MSWORD.jpg" alt="Microsoft Word" 
       style="width:fill-available;height:fill-available" usemap="#ClickFile"> 

       <map name="ClickFile"> 

       <area href="javascript:(function(){ 
        document.getElementById('img1').src='ClickFile.png';})()" 
        shape="rect" coords="58,50,0,25"> 
       </map>  

       <map name="image1" id="image1"> 
        <area href="javascript:replaceImage('img1', 'ClickFile.png', 'img2')" 
         shape="rect" coords="50,58,0,25"> 
       </map> 

       <area href="javascript:(function(){ 
        document.getElementById('img2').src='NewFile.png';})()" 
        shape="rect" coords="122,103,0,141"> 

       <map name="image2" id="image2"> 
        <area href="javascript:replaceImage('img2', 'Newfile.png', 'img3')" 
        shape="rect" coords="122,103,0,141"> 
       </map> 

Answer 1

これが問題であるが、あなたの</map>タグはその中<area …>タグの直後に来ることを確認してくださいかどうかわかりません。今のところ、2番目と3番目のマップは最初のマップの内側にあり、おそらくブラウザを混乱させるでしょう。