resizing an image that is not at its natural size originally

[kevin-rowe]

After a few tweaks, this script works perfectly.

I have made some changes to my copy of the code to allow an image that is not displayed at natural dimensions to have its map resized.

        var scalingFactor = {
            //                width  : image.width  / image.naturalWidth,
            //                height : image.height / image.naturalHeight
            width: window.innerWidth / origwindowwidth,
            height: window.innerHeight / origwindowheight
        };

... var /*jshint validthis:true */ map = this, areas = null, cachedAreaCoordsArray = null, image = null, timer = null, origwindowwidth = window.innerWidth, origwindowheight = window.innerHeight;

This works for me. You could probably refine this to work individual images with origimageheight as a variable in the map and use the image.height on startup if you had multiple maps that could be independently resized.

Thought I'd share.

Kevin.

[zdenek-horak]

I had a similar issue with SVG image where image map has been targeted for different-than-natural resolution and the approach above could not work. I went with a custom attribute and a minor modification:

            var scalingFactor = {
                width: image.width / (image.hasAttribute("defaultWidth") ? parseInt(image.getAttribute("defaultWidth")) : image.naturalWidth),
                height: image.height / (image.hasAttribute("defaultHeight") ? parseInt(image.getAttribute("defaultHeight")) : image.naturalHeight)
            };

[tiger-five-in-lb]

where would you stick this code in? thanks!

[thomas-tnt23]

For me this won't work in Safari, so this is my solution...

var imageClone = document.createElement('img');
imageClone.src = image.src; 
document.body.appendChild(imageClone);
var naturalWidth = imageClone.width;
var naturalHeight = imageClone.height;
imageClone.remove();

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

in the end i got a BrowserCache-Issue, which is solved quick and dirty... :P

 function setup() {
                    areas = map.getElementsByTagName('area')
                    cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords)
                    image = getImg('#' + map.name) || getImg(map.name)
                    image.src = image.src + "?" + new Date().getTime(); //<<<------------SOLUTION
                    map._resize = resizeMap //Bind resize method to HTML map element
                }

[KyleDave]

Seems very odd to me that the imagemap resizer doesn't run when the page opens (in Firefox v.88). If I did anything to resize the window however, the map was fixed so I knew it was working. All I did was add this event: window.dispatchEvent(new Event('readystatechange'));