使用图像地图调整大小

Question

I found the following image map resizer so my image map will be responsive:

https://github.com/davidjbradshaw/image-map-resizer/blob/master/README.md

Following the instructions I placed the following code in the head:

<script src="imageMapResizer.min.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lte IE 8]>
    <script type="text/javascript" src="js/ie8.polyfil.min.js"></script>
<![endif]-->

But I don't know where to place the code:

imageMapResize([selector || map object]);

It says to put it at the bottom of the page. I tried placing it inside of the and outside the tag but it's still not working. Where am I supposed to put it??

Answer 1

If you have confusion using vanilla-javascript you could use jquery which is also supported by that library, put the below code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="imageMapResizer.min.js"></script>
<script>
     $(document).ready(function() {
         $('map').imageMapResize();
     });
</script>

Answer 2

You "should" add the script-tag just before the closing body-tag (there are a lot great articles about that topic):

    <script></script>
  </body>
</html>

Note, that you have to include a library before you "execute" it ;)

It seems your selector is wrong. Try this:

<script>imageMapResize('[name="faith_boosters_map"]')</script>