Image Map does not load when inside closed accordion on initial page load

[jasonflaherty]

I have an image map and this:

$(document).ready(function(e) { $('img[usemap]').rwdImageMaps();

$('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
});

});

It works fine if you open the accordion, then resize the browser window a little bit, but if you don't, when opening the accordion, the image has no mapped areas. I am using Bootstrap 3 accordion. I understand this happens since the initial load of the div in the accordion is hidden by the css and then page load happens and js is called.

[YSBDesign]

I have the same problem

El 27/11/2013, a las 09:33 a.m., Jason Flaherty [email protected] escribió:

I have an image map and this:

$(document).ready(function(e) { $('img[usemap]').rwdImageMaps();

$('area').on('click', function() { alert($(this).attr('alt') + ' clicked'); }); });

It works fine if you open the accordion, then resize the browser window a little bit, but if you don't, when opening the accordion, the image has no mapped areas. I am using Bootstrap 3 accordion.

— Reply to this email directly or view it on GitHub.

[crockett95]

Bootstrap docs gives four custom events for the collapse JS: 'show.bs.collapse', 'shown.bs.collapse', 'hide.bs.collapse', and 'hidden.bs.collapse'. My thought is rather than getting this plugin tailored to that (vendor-specific) use case, simply use:

$(window).on('shown.bs.collapse' function () {
    $(this).trigger('resize');
});

This will catch the accordion event when it finishes, trigger a window resize that the image maps listens for, and reset the image maps to their new values.

[briwalker]

I'm having the same problem, but I'm not using Bootstrap. I just have the div the image is in hidden until the user clicks a button, then set it to fadeIn(). Is there any way to fix this?

[aportmann]

same problem. no fix for this problem?

[Yana1]

I also have this problem now, but inside jQuery Tabs, is this problem fixed now?

[mmeinen]

crokett95 has the a correct answer here, but he is missing a comma in his code, here is the fixed version:

$(window).on('shown.bs.collapse', function () {
    $(this).trigger('resize');
});

[guiller82]

Hi there, I have been working on it... since two days ago... the thing s that the image I have to put the imagemaps is generated by the system... it is inside a "

" and doesnt works

<style>
body {
    font-family: Helvetica, Arial, sans-serif;
}
h1 {
    font-size: 20px;
}
div {
    width: 100%;
}
img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div data-src="f3.JPG" data-media="(min-width: 768px)"></div>
<div data-src="f4.JPG" data-media="(min-width: 980px)"></div>
<div data-src="f5.JPG" data-media="(min-width: 1200px)"></div>      
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="/homepage/images/banner/xxx-ssss-950x240.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->