Image Map Fixer

Finds image maps where the image fails to load and add colored blocks to make them more visible.
Per 30-12-2015. Zie de nieuwste versie.
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==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.
// @version       1.0.0
// @grant         GM_xmlhttpRequest

// ==/UserScript==

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

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

function evaluateImage(pic)
{
	GM_xmlhttpRequest({
		url: pic.src,
		method: "HEAD",
		onload: function(response) {
			//Going off of response code is unreliable. Sometimes an image will return a status code of 200 even though it would redirect to an error page should you view the image directly, so we're looking at content type instead
			if(response.responseHeaders.indexOf("Content-Type: text/html") > -1)
			{
				var picOffset = {x:pic.getBoundingClientRect().left, y: pic.getBoundingClientRect().top};
				console.log(picOffset);
				var map = document.body.querySelector("[name = " + pic.getAttribute("usemap").substring(1) + "]");
				var svgNs = "http://www.w3.org/2000/svg";
				var newSVG = document.createElementNS(svgNs, "svg");
				newSVG.setAttributeNS(null, "width", pic.width);
				newSVG.setAttributeNS(null, "height", pic.height);
				newSVG.style.position = "absolute";
				newSVG.style.left = picOffset.x + "px";
				newSVG.style.top = picOffset.y + "px";
				pic.parentNode.insertBefore(newSVG, pic.nextSibling);
				for(a = 0; a < map.areas.length; a++)
				{
					var newLink = document.createElementNS(svgNs,"a");
					if(map.areas[a].href) newLink.setAttributeNS("http://www.w3.org/1999/xlink", "href", map.areas[a].href);
					switch(map.areas[a].getAttribute("shape").toLowerCase())
					{
						case "rect":
							var parsedCoords = map.areas[a].getAttribute("coords").split(",");
							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()); 
							
							newLink.appendChild(rect);
							break;
						case "circle":
							var parsedCoords = map.areas[a].getAttribute("coords").split(",");
							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()); 
							
							newLink.appendChild(circle);
							break;
						case "poly":														
							
							var parsedCoords = map.areas[a].getAttribute("coords").split(",");
							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());
							
							newLink.appendChild(poly);
							break;
						default:
							break;
					}
					newSVG.appendChild(newLink);
				}
			}
		}
	});
}

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;
}