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.
// @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;
}