Image Map works in Internet Explorer, but not Chrome

Question

I have set up a page with image mapping using the below code. The mapping works in Internet Explorer 10, 11, Edge, and FireFox but does not work in Chrome. Any idea what i'm missing?

<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

Your IDs don't match. You refer to #map in the image element, but your map's ID is Map . Identifiers are case-sensitive.

Things work fine in Chrome after fixing the IDs:

 <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>