Need help implementing dynamic (auto resizing) imagemap code (HTML / JS / Jquery)

JavaScript
1

Recently discovered some Javascript a guy posted that makes your imagemap set to 100% width so that it auto resizes no matter the window and really need to get it working cos my links do not line up. I don’t know enough to know exactly where to put the JS in my HTML and whether or not I should use Jquery or what that even is.

This is my site:

This is the guys post and code (follow links):

If someone can help decode it for me lol and give me a step by step as to how to get this working I would really appreciate it!

Thank you!

2

Hi @somenovice, have you tried following the instructions from the repo?

And no you don’t need jQuery, it’s a library for DOM manipulation that is largely obsolete these days. It used to be very useful when we had to support a variety of IE versions though.

3

Yes, clearly I can read the page I linked you to, but it is not clear enough for my inexperienced and unknowledgeable ass to accomplish it with just these instructions… hence my post. Need serious dumbing down, step by step instructions because I tried to paste that javascript into my HTML and nothing happened. Do not understand where exactly to put the final piece of code that it lists first and says to put “at the bottom.” If anyone can just write me very simple, dumbed down steps that clarify exactly where to put the code to make it work. I’ve tried everything… including contacting this guy on facebook and sending a request to no avail… lol. :+1:

4

Sure. :-)

  • Download imageMapResizer.min.js into your project, say scripts/imageMapResizer.min.js
  • Include it in your page (you may have to adjust the path if your index page is not located at your project root):
    <script src="./scripts/imageMapResizer.min.js"></script>
  • Initialise it:
    <script>
imageMapResize();
</script>

(Both scripts go to the bottom of the page, right before the closing </body> tag, in the above order.)

5

Not sure what you mean by the first part of “download imageMapResizer.min.js into your project.” I am using only Notepad.

6

With project I mean the folder that contains your HTML page. You can read about structuring your project here:

(Actually, you might want to check out that complete “Getting started with the web” guide…)

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.