Resizing only considers first image referencing the image map

[rubenvarela]

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.