html mapping in gif not working in mobile when resized-CodePudding

I have a gif I am using as an HTML map image to place links on the gif.

I use the following code which is working fine on desktop devices

On a mobile, the gif was overflowing, so I used some CSS but now the mapping is not working on the gif because of that.

Can anyone please tell me how to fix this?

@media only screen and (max-width: 600px) {
  #shaka {
    display: block !important;
    width: 100%;
    margin-top: -100%;
  }
}

<img src="https://thebrandchimp.com/nk/nk.gif" usemap="#image-map" id="shaka">
<map name="image-map">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="104,139,124,147,140,155,152,165,155,178,155,190,155,201,151,217,145,225,136,231,123,236,114,240,105,244,94,240,84,237,73,231,66,224,56,219,53,208,53,194,53,180,53,166,71,153" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="269,202,277,206,286,211,296,213,314,224,319,233,324,248,322,258,320,266,320,276,316,282,305,288,293,297,278,302,271,306,260,304,254,298,246,296,236,294,229,285,220,275,218,261,217,245,217,230,229,220,248,209" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="447,54,455,56,468,60,475,67,483,72,494,77,502,92,502,101,500,120,497,133,487,144,471,151,453,158,443,161,433,153,417,146,406,138,397,131,393,116,394,101,394,89,405,75,424,60" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="635,203,623,206,612,211,599,218,589,229,586,245,582,259,584,278,594,289,613,299,635,308,655,298,674,289,683,283,687,276,688,260,688,246,686,229,675,221,658,210" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="800,138,819,144,830,153,844,159,849,171,852,184,851,201,851,215,843,221,832,227,821,234,807,243,796,242,783,237,769,229,757,221,749,215,748,203,747,192,745,173,751,164,770,150" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="17,264,178,289" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="212,327,327,348" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="349,17,550,46" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="535,326,747,346" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="749,261,851,283" shape="rect">
</map>

CodePudding user response：

I've had this issue a while ago and one of the solutions was to use responsive image maps. There is a handy JQuery Plugin that you can use.

Plugin: https://github.com/stowball/jQuery-rwdImageMaps

Demo: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

---- Updated with Demo ----

Just open this in full screen and change browser size.

$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
});

img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
  transition: all .5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://res.cloudinary.com/positionrelativ/raw/upload/v1492377595/jquery.rwdImageMaps_lq5sye.js"></script>

<img src="https://thebrandchimp.com/nk/nk.gif" usemap="#image-map" id="shaka">
<map name="image-map">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="104,139,124,147,140,155,152,165,155,178,155,190,155,201,151,217,145,225,136,231,123,236,114,240,105,244,94,240,84,237,73,231,66,224,56,219,53,208,53,194,53,180,53,166,71,153" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="269,202,277,206,286,211,296,213,314,224,319,233,324,248,322,258,320,266,320,276,316,282,305,288,293,297,278,302,271,306,260,304,254,298,246,296,236,294,229,285,220,275,218,261,217,245,217,230,229,220,248,209" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="447,54,455,56,468,60,475,67,483,72,494,77,502,92,502,101,500,120,497,133,487,144,471,151,453,158,443,161,433,153,417,146,406,138,397,131,393,116,394,101,394,89,405,75,424,60" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="635,203,623,206,612,211,599,218,589,229,586,245,582,259,584,278,594,289,613,299,635,308,655,298,674,289,683,283,687,276,688,260,688,246,686,229,675,221,658,210" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="800,138,819,144,830,153,844,159,849,171,852,184,851,201,851,215,843,221,832,227,821,234,807,243,796,242,783,237,769,229,757,221,749,215,748,203,747,192,745,173,751,164,770,150" shape="poly">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="17,264,178,289" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="212,327,327,348" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="349,17,550,46" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="535,326,747,346" shape="rect">
  <area target="_blank" alt="demo" title="demo" href="demo.com" coords="749,261,851,283" shape="rect">
</map>