The following Javascript gets an the coordinates from an image map, recalculates the coordinates based on the rendered size of the image and displays a modal based on the area of the image being hovered over. This works fine when using chrome on my local machine, but when the page is loaded from the web server, the new coordinates for the rendered image are returned as NaN. Anybody got any thoughts on why this is going wrong and what I can do to fix it?
<script>
// Get the image element and the map areas
var image = document.getElementById("team-image");
var areas = document.querySelectorAll('map[name="team-map"] area');
// Get the original image size
var originalImageWidth = image.naturalWidth;
var originalImageHeight = image.naturalHeight;
// Calculate the actual pixel coordinates based on the original and displayed image sizes
function calculatePixelCoordinates(coords, image) {
var imageWidth = image.offsetWidth;
var imageHeight = image.offsetHeight;
var coordArray = coords.split(",");
var pixelCoords = [];
for (var i = 0; i < coordArray.length; i++) {
if (i % 2 === 0) {
pixelCoords.push((parseInt(coordArray[i])) / originalImageWidth * (imageWidth));
} else {
pixelCoords.push((parseInt(coordArray[i])) / originalImageHeight * (imageHeight));
}
}
return pixelCoords.join(",");
}
// Add event listeners to each map area
areas.forEach(function (area) {
area.addEventListener("mouseover", function () {
var modalId = area.dataset.modal;
var modal = document.getElementById(modalId);
modal.style.display = "block";
});
area.addEventListener("mouseleave", function () {
var modalId = area.dataset.modal;
var modal = document.getElementById(modalId);
modal.style.display = "none";
});
// Update the coordinates when the image is loaded or resized
image.addEventListener("load", function () {
var pixelCoords = calculatePixelCoordinates(area.getAttribute("coords"), this);
area.setAttribute("coords", pixelCoords);
});
window.addEventListener("resize", function () {
var pixelCoords = calculatePixelCoordinates(area.getAttribute("coords"), image);
area.setAttribute("coords", pixelCoords);
});
});
// Add event listeners to close the modals
var closeButtons = document.getElementsByClassName("close");
for (var i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener("click", function () {
var modal = this.parentElement;
modal.style.display = "none";
});
}
</script>
Just scratching my head here, I’m not that up to speed on Javascript
Edit:
The orignal image map is as follows:
<map name="team-map">
<area shape="rect" coords="0,0,166,400" alt="sally" data-modal="modal1">
<area shape="rect" coords="166,0,322,400" alt="issy" data-modal="modal2">
<area shape="rect" coords="322,0,450,400" alt="tracy" data-modal="modal3">
<area shape="rect" coords="450,0,568,400" alt="sharon" data-modal="modal4">
<area shape="rect" coords="568,0,695,400" alt="annalisa" data-modal="modal5">
<area shape="rect" coords="695,0,900,400" alt="lynne" data-modal="modal6">
</map>
These coordinates are based on the orginal size of the image (900×400)
This gets read in the “// Get the image element and the map areas” and the new coordinates are recalculated based on the rendered size of the image and returns a variable “pixelCoords”, which are then put into a string and returned to the browser.
On my local machine, the map is rendered as:
<map name="team-map">
<area shape="rect" coords="0,0,650.9066666666666,1570.4225352112676" alt="sally" data-modal="modal1">
<area shape="rect" coords="650.9066666666666,0,1265.1822222222222,1570.4225352112676" alt="issy" data-modal="modal2">
<area shape="rect" coords="1265.1822222222222,0,1772.3822222222223,1570.4225352112676" alt="tracy" data-modal="modal3">
<area shape="rect" coords="1772.3822222222223,0,2235.9066666666668,1570.4225352112676" alt="sharon" data-modal="modal4">
<area shape="rect" coords="2235.9066666666668,0,2736.062222222222,1570.4225352112676" alt="annalisa" data-modal="modal5">
<area shape="rect" coords="2736.062222222222,0,3544.7644444444445,1570.4225352112676" alt="lynne" data-modal="modal6">
</map>
Whereas the map when served by the server is rendered as:
<map name="team-map">
<area shape="rect" coords="NaN,NaN,NaN,NaN" alt="sally" data-modal="modal1">
<area shape="rect" coords="NaN,NaN,NaN,NaN" alt="issy" data-modal="modal2">
<area shape="rect" coords="NaN,NaN,NaN,NaN" alt="tracy" data-modal="modal3">
<area shape="rect" coords="NaN,NaN,NaN,NaN" alt="sharon" data-modal="modal4">
<area shape="rect" coords="NaN,NaN,NaN,NaN" alt="annalisa" data-modal="modal5">
<area shape="rect" coords="NaN,NaN,NaN,NaN" alt="lynne" data-modal="modal6">
</map>
