イメージマップはInternet Explorerでは動作しますが、Chromeでは動作しません

Question

次のコードを使用してイメージマッピングを含むページをセットアップしました。このマッピングはInternet Explorer 10,11、Edge、およびFireFoxで動作しますが、Chromeでは動作しません。私は何が欠けているか考えていますか？

<center><img src="Live View.png" width="1024" height="768" border="0" 
usemap="#map" /></center> 
<map id="Map" name="Map"> 
<area shape="rect" coords="530,50,650,100" href="live view.html" target="_self" /> 
<area shape="rect" coords="662,58,821,118" href="Setup.html" target="_self" /> 
<area shape="rect" coords="315,550,370,520" href="1x1.html" target="_self" /> 
<area shape="rect" coords="390,550,445,520" href="2x2.html" target="_self" /> 
<area shape="rect" coords="455,550,505,520" href="3x3.html" target="_self" /> 
<area shape="rect" coords="525,550,650,520" href="fullscreen.html" target="_self" />  
</map> 

Answer 1

IDが一致しません。 image要素の#mapを参照していますが、マップのIDはMapです。識別子は大文字と小文字を区別します。

物事はIDを固定した後、Chromeで問題なく動作：

<center><img src="http://via.placeholder.com/1024x768" usemap="#map"></center> 
 
<map id="map" name="map"> 
 
<area shape="rect" coords="530,50,650,100" href="live view.html" target="_self" /> 
 
<area shape="rect" coords="662,58,821,118" href="Setup.html" target="_self" /> 
 
<area shape="rect" coords="315,550,370,520" href="1x1.html" target="_self" /> 
 
<area shape="rect" coords="390,550,445,520" href="2x2.html" target="_self" /> 
 
<area shape="rect" coords="455,550,505,520" href="3x3.html" target="_self" /> 
 
<area shape="rect" coords="525,550,650,520" href="fullscreen.html" target="_self" />  
 
</map>