Finds image maps where the image fails to load and add colored blocks to make areas more visible.
Per
// ==UserScript==
// @name Image Map Fixer
// @namespace DoomTay
// @description Finds image maps where the image fails to load and add colored blocks to make areas more visible.
// @version 0.8.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 dimensions = {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":
var parsedCoords = /(\d+), (\d+), (\d+), (\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 = dimensions.x + coords.x;
areaLink.style.top = dimensions.y + coords.y;
areaLink.style.backgroundColor = randomColor();
areaLink.style.width = coords.width;
areaLink.style.height = coords.height;
areaLink.style.overflow = "auto";
pic.parentNode.insertBefore(areaLink, pic.nextSibling);
break;
default:
break;
}
}
}
}
});
}
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;
}