☰

Image Map Fixer

Finds image maps where the image fails to load and add colored blocks to make them more visible. Only supports RECT areas for now.

目前為 2015-12-29 提交的版本，檢視 最新版本。

// ==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. Only supports RECT areas for now.
// @version       0.9.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().x, y: pic.getBoundingClientRect().y};
				var map = document.body.querySelector("[name = " + pic.getAttribute("usemap").substring(1) + "]");
				for(a = 0; a < map.areas.length; a++)
				{
					switch(map.areas[a].getAttribute("shape"))
					{
						case "rect":
						case "RECT":
							var parsedCoords = /(\d+),\s?(\d+),\s?(\d+),\s?(\d+)/.exec(map.areas[a].getAttribute("coords"));
							var coords = {x: parseInt(parsedCoords[1]), y: parseInt(parsedCoords[2])};
							coords.width = parseInt(parsedCoords[3]) - coords.x;
							coords.height = parseInt(parsedCoords[4]) - coords.y;
							var areaLink = document.createElement("A");
							areaLink.href = map.areas[a].href;
							areaLink.style.position = "absolute";
							areaLink.style.left = picOffset.x + coords.x + "px";
							areaLink.style.top = picOffset.y + coords.y + "px";
							areaLink.style.backgroundColor = randomColor();
							areaLink.style.width = coords.width + "px";
							areaLink.style.height = coords.height + "px";
							break;
						case "circle":
						case "CIRCLE":
							var parsedCoords = /(\d+),\s?(\d+),\s?(\d+)/.exec(map.areas[a].getAttribute("coords"));
							var coords = {x: parseInt(parsedCoords[1]), y: parseInt(parsedCoords[2])};
							coords.radius = parseInt(parsedCoords[3]);
							var areaLink = document.createElement("A");
							areaLink.href = map.areas[a].href;
							areaLink.style.position = "absolute";
							areaLink.style.left = (picOffset.x + coords.x - coords.radius) + "px";
							areaLink.style.top = (picOffset.y + coords.y - coords.radius) + "px";
							areaLink.style.backgroundColor = randomColor();
							areaLink.style.width = areaLink.style.height = (coords.radius * 2) + "px";
							areaLink.style.borderRadius = coords.radius + "px";
							break;
						default:
							break;
					}
					areaLink.style.color = "white";
					areaLink.style.overflow = "auto";
					pic.parentNode.insertBefore(areaLink, pic.nextSibling);
					
				}
			}
		}
	});
}

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