resizing an image that is not at its natural size originally
kevin-rowe opened this issue · comments
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.
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)
};
where would you stick this code in? thanks!
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
}
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'));