Menu icon Foundation
Image map hotspots don't scale with image

Using Foundation 5. I have an image of a map and am using a client-side image map to add interactive hotspots. Works fine at 100%, but when the browser window is resized smaller, the hotspots stay in the same location without adapting to the modified image size. Is there a way to make image maps responsive?

<img name="sitemap1000" src="sitemap1000.jpg" width="1000" height="721" usemap="#m_sitemap1000" alt="">
<map name="m_sitemap1000">
    <area shape="poly" coords="625,349,744,349,744,398,625,398,625,349" href="ab/index.html" title="AB" alt="AB" >
    <area shape="rect" coords="602,291,680,334" href="cd/index.html" title="CD" alt="CD" >
    <area shape="poly" coords="448,283,588,283,588,326,448,326,448,283" href="ef/index.html" title="EF" alt="EF" >
</map>   

         

image mapResponsiveimagehotspotFoundation 5

Using Foundation 5. I have an image of a map and am using a client-side image map to add interactive hotspots. Works fine at 100%, but when the browser window is resized smaller, the hotspots stay in the same location without adapting to the modified image size. Is there a way to make image maps responsive?

<img name="sitemap1000" src="sitemap1000.jpg" width="1000" height="721" usemap="#m_sitemap1000" alt="">
<map name="m_sitemap1000">
    <area shape="poly" coords="625,349,744,349,744,398,625,398,625,349" href="ab/index.html" title="AB" alt="AB" >
    <area shape="rect" coords="602,291,680,334" href="cd/index.html" title="CD" alt="CD" >
    <area shape="poly" coords="448,283,588,283,588,326,448,326,448,283" href="ef/index.html" title="EF" alt="EF" >
</map>   

         
Pratiba Premkumar 6 days ago

Did you ever figure this out? I am having the same issue.

Pam Richmond 6 days ago

I ended up using http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html