davidjbradshaw / image-map-resizer

Responsive HTML Image Maps

Image Map Resize

This is a simple library that makes HTML Image Maps responsive, so that they automatically stay scaled to the size of the image they are attached to. It detects the window being resized and updates the co-ordinates of the image map accordingly.

This library can be used with or without jQuery.

Native JS Usage

Include the imageMapResizer.min.js script then add the following call to the bottom of your page:

imageMapResize();

Optionally, you can pass a CSS selector that returns a collection of map tags. For example, 'map.myMap' or a direct reference to a map object in the DOM. This function returns an array of map elements that it has been bound to.

jQuery Usage

Include jQuery and the imageMapResizer.min.js script and then add the following call to the bottom of your page:

$('map').imageMapResize();

Or you may want to wrap it in a $(document).ready() function:

$(document).ready(function() {
    $('map').imageMapResize();
});

WordPress

There is a port of this library to WordPress made by @iankevinmcdonald https://wordpress.org/plugins/add-image-maps/

License

Copyright © 2014-19 David J. Bradshaw - Licensed under the MIT license

image-map-resizer's Issues

Best Practice with react?

Is there a best practice to use it with react?

Does not work with srcset/sizes

When the sizes attribute is used on an image, Firefox and Chrome (at least) appear to be using the calculated size based on the sizes attribute for image.naturalWidth and image.naturalHeight. This means the scale factor is wrong.

Issue with coordinates resizing

Hi, i´m having an issue with the coordinates of the image map. It correctly resizes, but the coordinates of the areas don´t seem to change, or if they do, the don´t resize appropiately.
The link to the page is www.clinicapicrin.cl
Any help would be very much appreciated.
Thanks!

onChange event

fire another event, when resize coords completed?

Anyway to do it?

Coordinate off

Hi David,
Great plugin, but the image map always have the left coordinate off 380px (for example we set 920 but the plugin is dropping to 541). Any idea what could be wrong?
Thank You,
Vicky.

Works if image starts at native size, but not smaller

If this site starts at full browser size and I resize it, the map correctly resizes with the image. But if I hit refresh while it's smaller, the map just loads at the full size and doesn't match up at all. Any ideas?
edit: more information... the image is part of content that is display: none on page load. When I resize it slightly, it correctly resizes the map. So it's just on initial load, and activating tab of content, it's not working.

Links disappear

Just want to begin with thanking you for putting in work on this.

I'm having some issues with the link disappearing on the image-map after adding the script,

<script> $(document).ready(function() {
    $('map').imageMapResize();
});</script>

The links work when $(document).ready(function() { is removed.
However, the responsive image mapping still won't work.

This is the used code. (If you find any issues with that).

BEFORE HEAD:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write("<script src='{{ "jquery.min.js" | asset_url }}'>\x3C/script>")</script>
    {{ 'app.js' | asset_url | script_tag }}
    {% if settings.product_slideshow_animation == 'zoom' %}{{ "cloudzoom.js" | asset_url | script_tag }}{% endif %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
    {{ 'imageMapResizer.min.js' | asset_url | script_tag }}
    {{ content_for_header }}

CODE ON PAGE:

<div id="homepage_slider" class="flexslider">
    <ul class="slides">
        <img name="largebanner" src="//cdn.shopify.com/s/files/1/0786/5107/files/LARGE_BANNER_15.jpg?3084639546159262693" usemap="#m_largebanner" border="0" width="100%"></img>
                    <map name="m_largebanner">
                <area shape="rect" coords="294,352,425,368" href="https://royalstripes.com/collections/ties" title="Ties">
            <area shape="rect" coords="1193,367,971,347" href="https://royalstripes.com/collections/pocketsquares" title="Pocketsquares">
        </map>
    </ul>
</div>

Please contact me at,
[email protected] if you want to see the site. (Requires password which can't be shared here.)

Would appreciate the help.
A fee could be payed.

Best Regards,
Robbin.

Not working with properly with Google TalkBack screen reader

Works fine in Chrome on Android tablet until I activate the Google TalkBack screen reader. Then swiping through the links shows the focus area the correct size, but but positioned as if the image was at 0,0 in the browser. And then because the focus box isn't aligned with the href rects, double tapping to activate the links doesn't work.

Works as expected in VoiceOver, NVDA, and JAWS screen readers.

http://www.a3mg.com/hhmi/click_learn/accessibility/Phylogenetic_Trees/15imgmap.html

Coords aren't in its place

Hi there,

Firstly, thanks for this awesome script, if I can make it work is gonna save me a lot of time.

I have a problem, when I run jQuery('map').imageMapResize(); coords aren't in it's inicial place, all of them are a little bit higher and on its left, I don't know why, if I don't run your script all my areas are in the place they are supposed to be.

Thanks.

Image map resizer not working

Hello all!

I'm relatively new to Javascript and jquery and i was hoping you could help me.

I've added imageMapResizer to my site but it won't work. What am i doing wrong? Javascript is giving me any errors. The website where the image map is is on http://www.trambaanlengel.nl/testwebsite/overzichtskaart.html

When you click on the 10, a lightbox with addtional info pops up (the coordinates are slightly off because i resized the image).

Could you help me get the imageMapResizer to work?

Thanks in Advance

Tom The Noob

Image map not resizing

Hi there, I have tried to implement your script into this website. I not sure i have done it properly and thats probably why it isn't working correctly. The image map does seem to be resizing but moving position so it is not sitting over the logo correctly. I have only put the image map on the first logo so far. When I go to small screen size the image map drops below the logo. Any ideas how I can fix it?
Thanks
Tony

Highlight color

Is there an easy way to add a highlight color to the areas? I really need this feature...

Unable to run imageMapResizer.min.js through UglifyJS because source map is missing

I have installed this as a bower repo, using the package name "imagemap-resizer". As part of the bower package configuration for this project, bower will ignore the "src" directory, leaving only the "js" directory.

imageMapResizer.min.js makes reference to its source map file as such:
//# sourceMappingURL=../src/imageMapResizer.map

When building my project assets with UglifyJS and including imageMapResizer, it attempts to locate the source map and fails since the "src" directory doesn't exist.

Suggested solutions:

1. Don't generate a source map with the minified JS file in this repo. Then I'll be able to use the minified file without problems.
2. Remove the ignore rule on "src" directory. I'm happy to use the source / unminified version in my project, since it will be run through UglifyJS anyway.

Problem when using side left menu.

I have side left menu (provide by adminLTE).
When first time open (side left menu opened), image map resizer is working.
When side left menu hidden/minimize, image automatic resize ( I use class="img-responsive"), but image map resizer is not working . I checked in inspect element, the coordinate is not changed.

Use with AngularJS

Have you a solution to use it with AngularJS ?
I can't initiate mapster on an image in a controller... Maybe with a directive but i don't know how to do it.

Scaling Up.

Works fine for scaling map down but I can't get it to scale the map up in Chrome.

not working on many maps on one page

It looks it works only on first image map on a page
how to make it work on many?

IE11: Displayed image size is sometimes wrong in initial image load

I am facing a problem that only shows in Internet Explorer (I am testing with IE11) where the displayed image size is wrongly reported as 28x30 pixels (this seems to be the default value reported by IE when an image is broken or not yet available).

This only happens when the image is initially fetched (not when loaded from the cache), and it is not always reproducible.

I inserted some traces in the sourceImageOnLoadF() function and I verified that when the problem occurs:

• displayedImage.width is always 28
• displayedImage.height is always 30
• displayedImage.complete is true (this puzzles me)

If I attach an onload handler to displayedImage, then when this handler fires the displayed image dimensions are always correct (but note that in IE this handler will not fire if the image comes from the cache.)

One possible way to fix this would be to attach an onload handler to displayedImage. If this fires, then check the displayed image dimensions. If they are different than the dimensions seen by sourceImageOnLoadF, then trigger a resize.

Responsiveness not working

Hi
I have used the image-map-resizer on one of my page and can't seem to get it working responsively. Would you be able to take a look at it and tell me why it is not working?
http://duffygroup.ca/map-test/

Thanks

jQuery dependency in Bower

Hi, when using bower, jQuery is listed as a dependency, while all other lists jquery (e.g angulartics), resulting in it being pulled down twice.

Maybe this should be fixed in Bower, but until then could you maybe change the dependency to all lower-case?

Image resize on dynamically added images

how can we use image resizer when image is hidden on initial page load and its coming on some user event

multi init calls destroy map

hard to explain just do this steps to understand:
open the demo, write in the console "imageMapResize();" few times see that the map is not correct anymore..

I need it to work cause I have some maps that added by ajax to the page so I need to call the function multipile times

Example is not working

I copy pasted the sources of the example, added the sources of this package and...it was not working.

No error in the javascript console, everything fine, all the files loaded...looks like no problem, but when I resize the image, the map doesn't.

I am using firefox on ubuntu.

I fear this is not enough information, but that's all I can tell you. Ask anything.

map coordinates off initially when used in conjunction with turn.js

the map coordinates are off when initially loading the page when used in conjunction with turn.js and a separate piece of code to make it responsive. It is corrected when you resize the browser.

While this issue isn't with your code David, I was wondering if you or anyone else here happens to know of a means to recalculate the coordinates after the page has rendered/redraw as if the browser has been resized?

Extra code in min.js

At the bottom of the min.js file, there is this:

//# sourceMappingURL=../src/imageMapResizer.map

This generates errors on Safari and Chrome, but not Firefox. Removing it clears the error, but it is not clear if it is needed for something. There is no reference to it in the instructions.

K is null

I got this error:
Error: k is null
e@http://localhost:3000/bower_components/image-map-resizer/js/imageMapResizer.min.js:7:501

any idea why?

Not working on mobile

I had this working correctly but am now getting a Source map error: request failed with status 404 when the page loads: link here

Any ideas on how to fix this?

Image map resize not working

I'm trying to make an image map responsive in wordpress. I'm using the Genesis Framework with the Altitude Pro theme. The image resizes but not the map part. Here is the webpage: http://liveconway.com/conway-plan-1/

Can you help me?

Thanks!

Ben
Here is my code:

<script type="text/javascript" src="http://liveconway.com/wp-content/js/imageMapResizer.jquery.json"></script> <script type="text/javascript"> $('map').imageMapResize(); </script>

Image map is only resized after initial window resize

When the page is loaded and the image hasn't got the original (stored in image map) size, the map is broken until the window is manually resized. Maybe recalculate the image map one time when starting up to prevent this bug?

Doesn't work with the prototype.js on the page

Doesn't work when there is prototype.js on the page because of the overridden Array.prototype.map.call.

Comment: Thank you!

Just wanted to say thank you very much for this code!!

I've just adapted it for a personal project I'm working that also uses adaptive-images, which essentially breaks the image map because it recreates the source image scaled for the required device.

What I did to get around this is to add width and height to the Map.Title element, and use those dimensions in the image map scaling. Not sure if that's the best way, but it works.

Thanks again!

Hidden image maps don't resize

Hello. To demonstrate the issue please take a look at http://jsfiddle.net/Adyyda/f2726u7g/3/

If i place the map in tab 1, the map will be ok.
If i place it in tab 3, the map will stop working properly - all links are condensed in top left corner instead of proper position, over each state hover.

Any idea how to fix to this?

Olso, can you tell me how we can add a hover colour or border when we hover a state? Thanks

Not Working

I have followed the simple instructions and this plugin is simply not working 99% of the time however once and awhile it does. See the live demo at http://www.aaron-schpitzer.ca/en/fir

Please help I would really like to use this plugin, thanks :)

Not working in Safari.

Is this plugin not working in Safari? Mac OSX as well as iOS.

Edit: It is working but you have to specify the img width="" and height="".

No Version Info

Code needs version info added

Can not get links to work on mobile devices

When my page loads on a mobile device (tablet in portrait mode, or phone), the mapped links don't work. If I stretch the window or resize it in any way, then they work. My site is in development is here: http://mosaikweb.com/client/beun/ and the image map is on the page with the map of the US and the video thumbnails (page title is "THE WORK WE DO" you have to click through several pages to see it). I have searched the Internet for solutions and tried numerous things with no luck, any help appreciated!! thank you, Laura

The URL you provide for an example does not exist.

I like your idea, but I wanted see a working example and the URL you provided for your example is broken. I get this message in Chrome...

"Oops! Google Chrome could not connect to davidjbradshaw.com
Access a cached copy of davidjbradshaw.­com/­imagemap-­resizer/­example/­"

Hopefully the cached page that Google provided will give me enough.

Issue when i integrate jquery.maphilight.js

Hi,

I have implemented imageMapResizer and jquery.maphilight.js for highlighting area on hover or click. Both are working fine. When i resize the window, image is not responding to responsiveness. Area positions are changing and highlight is also working fine.

FYI: http://davidlynch.org/projects/maphilight/docs/

Please suggest...

Google Chrome not working until user resizes window

Hi,

This plugin is great and I almost have it working perfectly for what I need.

I am having issues with Google Chrome. The javascript does not seem to work until a user resizes the browser window. I am thinking this relates to not recognizing the initial call to the javascript. I tried putting a timeout around the call to "imageMapResize" but it did not seem to work.

Works fine in other browsers, just chrome. I am using:

imageMapResize([selector || map object]);

Have you seen this issue?

Thanks,
Galin

Can't get it to work!

I don't understand why it doesn't work for me... am I missing something?

division by 0

In some conditions -- such as I believe when an image is not displayed -- the following becomes an issue because of division by 0:

        var scallingFactor = {
            width  : image.width  / image.naturalWidth,
            height : image.height / image.naturalHeight
        };

Would the solution be to test the value of image.naturalWidth or is there any way to call the resizeMap function when the image or its parents become visible?

Thanks a lot!

v1.0.0: links not working after initial load

Tested in Chrome and Safari. I received a complaint/notice that the homepage links were not clickable when returning to the homepage so I started extensive testing myself.

1. go to homepage that has imagemap, all links work fine.
2. click on a link
3. return to homepage by clicking on home or top logo --> imagemap links are not clickable anymore. No error in Chrome dev console.

I have no idea what the reason is so reverted back to v0.6.1 and I cannot simulate it anymore for the moment. Will let you know if I would see similar behaviour with v0.6.1

background full screen and button

Hello to all,
I created this page: http://www.famarinu.com/mmagazine/prova3.html in full screen, using the script js to map the image, and and I would like that comics are the buttons.
The problem is that in local it works fine, the comics are the buttons and the pointer appears in the right position, whereas when upload in remote the pointer is moved.
Can You know tell me why?
Thanks for your help

jQuery usage throws an error

When I use the code from the README.me file, e.g.:

$(document).ready(function() {
    $('map').imageMapResize();
});

Then it throws this error message:

Uncaught TypeError: $(...).imageMapResize is not a function

It works only w/o the jQuery selector part, e.g.:

$(document).ready(function() {
    imageMapResize();
});

(imageMapResizer.min.js)

---

Google Chrome 52.0.2743.116 m, Windows 10

Resizing only considers first image referencing the image map

I have a page that contains an image map. When you click on one of the areas, it changes the image. There is also different images for mobile and one for larger screens.

The current issues I have is that the code only takes into consideration the first image it finds per map and reuses this. In my case, the dimensions of that image when display:none is the original dimensions.

Here is the line it uses to define the image,

           image                 = document.querySelector('img[usemap="#'+map.name+'"]');

code reference

That first image, in my case, is the image for a larger screen which is hidden on mobile.

This function,

        function get_image() {
            var imageList = document.querySelectorAll('img[usemap="#'+map.name+'"]');
            var count = imageList.length;
            for (var i = 0; i < count; i++){
                var cImage = imageList[i].offsetParent;
                if (typeof cImage != undefined && cImage) {
                    return imageList[i];
                }
            }
        }

Works great for finding the first image on the image map that is not hidden.

Now, I'm trying to find the correct locations that need this call. The issue is that the previous line is defined under setup() which only runs once per page.

Image map inside bootstrap column

My image map is placed inside a portlet, which is put inside a bootstrap column. How can I change the ratio between the map and the window into the ratio between the map and the image? I need this because the image map size should depend on the size of the image, which depends on the size of the bootstrap column, not on the size of the window.

MY HTML CODE:

<div class="col-md-3 col-sm-3 col-sm-12">
    <!-- BEGIN PORTLET-->
    <div class="portlet light ">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-bar-chart font-green-sharp hide"></i>
                <span class="caption-subject font-green-sharp bold uppercase">Lichaam</span>
                <span class="caption-helper">Man</span>
            </div>
        </div>
        <div class="portlet-body">
            <img src="../../assets/global/img/male_front.png" width="100%" usemap="#bodymap">
            <map name="bodymap">
                <area shape="poly" coords="875,143,880,122,867,75,844,38,819,22,780,6,754,1,716,2,668,21,629,56,610,101,608,135,618,185,597,162,587,164,586,201,611,272,626,268,633,303,665,338,691,372,734,389,776,381,810,348,847,307,856,268,869,271,891,226,897,184,892,163,873,176,863,183" href="#">
            </map>  
        </div>
    </div>
    !-- END PORTLET-->
</div>

conflict with prototype

Hi David, Not an issue really more like a question.
Do you know how to avoid conflict with prototype? i get an error on:
line 75: Array.prototype.forEach.call(document.querySelectorAll(selector||'map'),init);
when i have the prototype library in the head.
thanks a lot,
Eduardo

Imagemapresizer works great with explorer and firefox, problems with chrome

Hi;

I am struggling a little bit with imagemapresizer and I can not figure out what I did wrong. It works great with firefox and explorer. With chrome it doesn't work. If you go to another page and return it works. If you refresh the page it doesn't work.

see http://www.curb-king.com/catalog/1index.htm

Your example at http://davidjbradshaw.com/imagemap-resizer/example/ works great

Any assistance would be greatly appreciated.

Thanks

Lane

Image map does not resize if window is resized while another tab is selected

Is there a way to fix this? Thanks!

Image Map Resize for off-screen elements?

Hey David, thanks for this code.

I am trying to implement this inside the Reveal.js setup... https://github.com/hakimel/reveal.js
The live site is here... http://www.goid.info/index.php/ipad. Using the nav in the lower right, you can arrow down to slide 11, titled "How PPP works", which has the image map on it.

When I load the site and arrow down, the imageMapResize() does not seem to fire on the off-screen elements.
However, because reveal.js also has URL variable access, once I arrow down to slide 11, and the new url is http://www.goid.info/index.php/ipad/how-ppp-works, and then refresh, it seems to work just fine.

I certainly don't expect you to support reveal.js, but any insights you may have on how I might trigger the imageMapResize() to effect off-screen elements would be greatly appreciated.

Thanks-