jquery - Image Map in HTML page is not giving responsive output -
i trying display 1 image in html page , in image have 6 circles on 6 circles want make them clickable.
i have achieved functionality static. means whenever viewing image in phone clickable circles not in proper places.
how can make image map responsive.
below code using
<div> <img usemap="#planetmap" width="588px" height="471px" style="display: block;margin: 0 auto;" src = "domains.png";> <map name="planetmap"> <area shape="circle" coords="327,70,66" href="#" target="_blank" alt="" /> <area shape="circle" coords="160,165,66" href="" target="_blank" alt="" /> <area shape="circle" coords="490,166,66" href="" target="_blank" alt="" /> <area shape="circle" coords="162,358,66" href="" target="_blank" alt="" /> <area shape="circle" coords="490,358,66" href="" target="_blank" alt="" /> <area shape="circle" coords="327,451,66" href="" target="_blank" alt="" /> </map> <div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.rwdimagemaps.min"></script> <script> $(document).ready(function() { $('map').imagemapresize(); }); </script>
what when trying make responsive on web page either 1 of 2 things, a. use 'media queries', or b. use front-end css framework 'bootstrap'. prefer latter.
here example of media query reduce size of specified image when condition met (this goes in css file):
@media (min-width: 700px) { .map { width: 400px; height: 400px; } }
now if device's width meets criteria, specified css code applied .map element.
this basic example think started on right track. can modify media query change dimensions of map fit different screen sizes. see here more detailed information: https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries
Comments
Post a Comment