Hotspots shifting location on image

[jeremyv97529701]

Hi, I am trying to place hotspots on an image and they don't seem to be in the location where i placed them originally. I've tried changing the width and height to pixel sizes and that didn't work. Any ideas?

<div class="section">

   <div class="container">

       <div class="row">

           <div class="twelve columns" id="Map">        

          <img src="BG/Tidal Bay-01.png" width="100%" height="auto" usemap="#Map" align="middle" border="0">

         <map name="Map">    

           <area shape="rect" coords="595,460,749,520" href="index.html" target="_blank" alt="Sealers">

         </map>

         </div>

       </div>

     </div>

</div>

[BenPleysier]

You have placed the hotspots on an image that was different in size to the one that you finished up placing in your document.

The problem is caused by having fluidly designed images (width: 100%) and image maps that are rigid in design.

The solution is to use a jQuery plugin like Responsive Image Maps jQuery Plugin

[Nancy OShea · Accepted solution]

I don't recommend using imagemaps on modern responsive web sites.  The hotspot coordinates invariably drift out of registration when the image is resized.    One solution is to create a responsive imagemap with SVG.

the new code – Create A Responsive Imagemap With SVG.

Before you go to all that trouble, ask yourself if there's a simpler way to create links without resorting to an imagemap.

Nancy