Image maps for responsive images

[pixelpadre]

Anyone dabbled in responsive image maps lately? I found one online generator which works really well for images with just a few large clickable areas.


zaneraydotcom/responsive-image-map/

[davewest]

Anyone dabbled in responsive image maps lately? I found one online generator which works really well for images with just a few large clickable areas.


zaneraydotcom/responsive-image-map/

image maps are a pain... responsive map is pain... do SVG with responsive maps with links and done with generators... I do states let this on state.. they are not images..

 <svg id="map"  version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 340" preserveAspectRatio="xMinYMin meet">
  <g>
    <g id="state-box">
<a id="s04" href="index.php?main_page=index&cPath=10_9" title="Arizona">
        <path d="M199.61517032078012,175.79074016650364L191.93636703449585,241.12188504047322L172.23028467558817,238.6076336700903L161.50187398740766,232.7028901608749L138.37807061568756,219.63780398877492L139.71907703704713,217.2343052705137L141.66659438869945,217.12730828537283L142.36120260190376,216.21808015984405L142.21566214721264,214.00121484690348L140.93272329562035,213.71045445426716L141.06788961727594,209.34846712264513L143.25944620113748,208.05847566478678L143.81287350824672,206.4138061795671L143.92664698682344,203.65917453461276L145.4021252167407,201.85238996963665L147.01314525809747,201.3577061892437L148.39395661488743,200.0468820898203L146.84235305101407,198.10140660385582L146.0976634018186,194.8725165236306L144.9102757122064,192.72575963409855L145.16509448497527,191.2847094774553L145.99617541418655,189.8159827240295L146.1706016160069,187.64955490916324L145.80585573024558,185.32270386345527L146.4481925451848,178.5177869986927L149.85713853933711,178.66505677451275L150.71296556748146,180.23518380121698L151.62060252542412,180.32680965392066L152.89914224054493,178.5427859304843L154.47257612387799,169.31317022078917L186.4514484548348,174.0878634550144Z" stroke="#FFFFFF" stroke-dasharray="1, 0" stroke-width="1.5" />
        <text x="162.45443067942776" y="203.9744010750751" title="AZ" style="white-space: pre;">AZ</text>
      </a>