☰

Image Map Fixer

Finds image maps where the image fails to load and add colored blocks to make them more visible.

// ==UserScript==
// @name          Image Map Fixer
// @namespace     DoomTay
// @description   Finds image maps where the image fails to load and add colored blocks to make them more visible.
// @include       *
// @version       1.1.1
// @grant         none

// ==/UserScript==

var pics = document.querySelectorAll("img[usemap]");

for(var i = 0; i < pics.length; i++)
{
	evaluateImage(pics[i]);
}

function evaluateImage(pic)
{
	pic.addEventListener("error", fixMap, true);

	if(pic.complete && pic.naturalWidth == 0) fixMap();

	function fixMap()
	{
		var picOffset = getOffset(pic)
		var map = document.querySelector("map[name = " + pic.useMap.substring(1) + "]");
		if(map)
		{
			var svgNs = "http://www.w3.org/2000/svg";
			var newSVG = document.createElementNS(svgNs, "svg");
			newSVG.setAttribute("class", "patchedMap " + map.name);
			newSVG.setAttributeNS(null, "width", pic.width);
			newSVG.setAttributeNS(null, "height", pic.height);
			newSVG.style.position = "absolute";
			newSVG.style.pointerEvents = "none";
			newSVG.style.left = Math.round(picOffset.left) + "px";
			newSVG.style.top = Math.round(picOffset.top) + "px";
			pic.parentNode.insertBefore(newSVG, pic.nextSibling);
			for(var a = 0; a < map.areas.length; a++)
			{
				if(map.areas[a].getAttribute("shape").toLowerCase() == "default") continue;
				if(map.areas[a].getAttribute("shape"))
				{
					var parsedCoords = map.areas[a].getAttribute("coords").split(",");

					switch(map.areas[a].getAttribute("shape").toLowerCase())
					{
						case "rect":
							var coords = {x: parseInt(parsedCoords[0]), y: parseInt(parsedCoords[1])};
							coords.width = parseInt(parsedCoords[2]) - coords.x;
							coords.height = parseInt(parsedCoords[3]) - coords.y;

							var rect = document.createElementNS(svgNs, "rect");
							rect.setAttributeNS(null, "x", coords.x);
							rect.setAttributeNS(null, "y", coords.y);
							rect.setAttributeNS(null, "width", coords.width);
							rect.setAttributeNS(null, "height", coords.height);
							rect.setAttributeNS(null, "fill", randomColor());

							newSVG.appendChild(rect);
							break;
						case "circle":
							var coords = {x: parseInt(parsedCoords[0]), y: parseInt(parsedCoords[1]), radius: parseInt(parsedCoords[2])};

							var circle = document.createElementNS(svgNs, "circle");
							circle.setAttributeNS(null, "cx", coords.x);
							circle.setAttributeNS(null, "cy", coords.y);
							circle.setAttributeNS(null, "r", coords.radius);
							circle.setAttributeNS(null, "fill", randomColor());

							newSVG.appendChild(circle);
							break;
						case "poly":
							var coords = "";
							for(var c = 0; c < parsedCoords.length; c += 2)
							{
								coords += parsedCoords[c] + "," + parsedCoords[c + 1] + " ";
							}

							var poly = document.createElementNS(svgNs, "polygon");
							poly.setAttributeNS(null, "points", coords);
							poly.setAttributeNS(null, "fill", randomColor());

							newSVG.appendChild(poly);
							break;
						default:
							break;
					}
				}
				else
				{
					var coords = {x: parseInt(parsedCoords[0]), y: parseInt(parsedCoords[1])};
					coords.width = parseInt(parsedCoords[2]) - coords.x;
					coords.height = parseInt(parsedCoords[3]) - coords.y;

					var rect = document.createElementNS(svgNs, "rect");
					rect.setAttributeNS(null, "x", coords.x);
					rect.setAttributeNS(null, "y", coords.y);
					rect.setAttributeNS(null, "width", coords.width);
					rect.setAttributeNS(null, "height", coords.height);
					rect.setAttributeNS(null, "fill", randomColor());

					newSVG.appendChild(rect);
				}
			}
		}
	}

	function randomColor() {
		var color = "rgb(";
		var colorValues = [];
		for(var c = 0; c < 3; c++)
		{
			colorValues.push(Math.floor(Math.random()*256));
		}
		color += colorValues + ")";
		return color;
	}
}

function getOffset(element)
{
	var elementCoords = element.getBoundingClientRect();
	var positioningParent = getPositioningElement(element);
	if(positioningParent != null)
	{
		var parentCoords = positioningParent.getBoundingClientRect();
		var left = elementCoords.left - parentCoords.left;
		var top = elementCoords.top - parentCoords.top;
	}
	else
	{
		var left = elementCoords.left + window.scrollX;
		var top = elementCoords.top + window.scrollY;
	}
	return {left:left, top:top};
}

function getPositioningElement(start)
{
	var startingPoint = start.parentNode;
	while(startingPoint != document.body)
	{
		if(window.getComputedStyle(startingPoint).position == "relative" && window.getComputedStyle(startingPoint).position != "absolute") return startingPoint;
		startingPoint = startingPoint.parentNode;
	}
	return null;
}

var observer = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		var patchMaps = document.querySelectorAll(".patchedMap");
		observer.disconnect();
		Array.prototype.forEach.call(patchMaps,
			map => {
				var offset = getOffset(map.parentNode.querySelector("img"));
				map.style.left = Math.round(offset.left) + "px";
				map.style.top = Math.round(offset.top) + "px";
			}
		);
		observer.observe(document.body, config);
		if(mutation.target.nodeName == "IMG" && mutation.target.useMap && mutation.target.parentNode.querySelector(".patchedMap"))
		{
			if(mutation.type == "attributes" && mutation.attributeName == "src") mutation.target.parentNode.removeChild(mutation.target.parentNode.querySelector(".patchedMap"));
		}
	});
});

var config = { attributes: true, subtree: true };
observer.observe(document.body, config);