function ifiOS() { return [ 'iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod' ].includes(navigator.platform) // iPad on iOS 13 detection || (navigator.userAgent.includes("Mac") && "ontouchend" in document) } function new_rwdImageMaps() { var img = document.getElementById('powerpuffgirls'); var r = img.getAttribute("width"); var e = img.getAttribute("height"); var positionInfo = img.getBoundingClientRect(); var n = positionInfo.width / 100, s = positionInfo.height / 100, u = "coords"; for (var t3 = document.querySelectorAll("area"), i = 0; i < t3.length; i++) { var a = t3[i]; if (!a.dataset.u) { a.dataset.u = a.getAttribute(u); } var ii = a.dataset.u.split(","); var p = new Array(ii.length); for (c = 0; c < p.length; ++c) { if (c % 2 == 0) { p[c] = parseInt(ii[c] / r * 100 * n); } else { p[c] = parseInt(ii[c] / e * 100 * s); } } a.setAttribute(u, p.toString()) } img.setAttribute("src", img.getAttribute("src")); } window.addEventListener('resize', function() { new_rwdImageMaps(); }); (function() { new_rwdImageMaps(); })(); var adj_forIOs = 0; if (ifiOS()) { adj_forIOs = 26; } else { adj_forIOs = 0; } for (var t = document.querySelectorAll("area"), i = 0; i < t.length; i++) t[i].addEventListener("click", function(t) { var rectw = document.getElementById('powerpuffgirls').getBoundingClientRect(); var rect = t.target.getBoundingClientRect(); var x = t.clientX - rect.left; //x position within the element. var y = t.clientY - rectw.top + 5; //y position within the element. document.getElementById('image__map_popup').innerHTML = this.getAttribute("title") ; document.getElementById('image__map_popup').style.left = x - adj_forIOs + "px"; document.getElementById('image__map_popup').style.top = y + "px"; document.getElementById('image__map_popup').style.display = 'block'; });