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