☰

Image Map Fixer

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

当前为 2016-01-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          Image Map Fixer
  3. // @namespace     DoomTay
  4. // @description   Finds image maps where the image fails to load and add colored blocks to make them more visible.
  5. // @version       1.0.0
  6. // @grant         GM_xmlhttpRequest
  7.  
  8. // ==/UserScript==
  9.  
  10. var pics = document.body.querySelectorAll("img[usemap]");
  11.  
  12. for(var i = 0; i < pics.length; i++)
  13. {
  14. 	evaluateImage(pics[i]);
  15. }
  16.  
  17. function evaluateImage(pic)
  18. {
  19. 	GM_xmlhttpRequest({
  20. 		url: pic.src,
  21. 		method: "HEAD",
  22. 		onload: function(response) {
  23. 			//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
  24. 			if(response.responseHeaders.indexOf("Content-Type: text/html") > -1)
  25. 			{
  26. 				var picOffset = {x:pic.getBoundingClientRect().left, y: pic.getBoundingClientRect().top};
  27. 				console.log(picOffset);
  28. 				var map = document.body.querySelector("[name = " + pic.getAttribute("usemap").substring(1) + "]");
  29. 				var svgNs = "http://www.w3.org/2000/svg";
  30. 				var newSVG = document.createElementNS(svgNs, "svg");
  31. 				newSVG.setAttributeNS(null, "width", pic.width);
  32. 				newSVG.setAttributeNS(null, "height", pic.height);
  33. 				newSVG.style.position = "absolute";
  34. 				newSVG.style.left = picOffset.x + "px";
  35. 				newSVG.style.top = picOffset.y + "px";
  36. 				pic.parentNode.insertBefore(newSVG, pic.nextSibling);
  37. 				for(a = 0; a < map.areas.length; a++)
  38. 				{
  39. 					var newLink = document.createElementNS(svgNs,"a");
  40. 					if(map.areas[a].href) newLink.setAttributeNS("http://www.w3.org/1999/xlink", "href", map.areas[a].href);
  41. 					switch(map.areas[a].getAttribute("shape").toLowerCase())
  42. 					{
  43. 						case "rect":
  44. 							var parsedCoords = map.areas[a].getAttribute("coords").split(",");
  45. 							var coords = {x: parseInt(parsedCoords[0]), y: parseInt(parsedCoords[1])};
  46. 							coords.width = parseInt(parsedCoords[2]) - coords.x;
  47. 							coords.height = parseInt(parsedCoords[3]) - coords.y;
  48. 														
  49. 							var rect = document.createElementNS(svgNs, "rect");
  50. 							rect.setAttributeNS(null, "x", coords.x);
  51. 							rect.setAttributeNS(null, "y", coords.y);
  52. 							rect.setAttributeNS(null, "width", coords.width);
  53. 							rect.setAttributeNS(null, "height", coords.height);
  54. 							rect.setAttributeNS(null, "fill", randomColor()); 
  55. 							
  56. 							newLink.appendChild(rect);
  57. 							break;
  58. 						case "circle":
  59. 							var parsedCoords = map.areas[a].getAttribute("coords").split(",");
  60. 							var coords = {x: parseInt(parsedCoords[0]), y: parseInt(parsedCoords[1]), radius: parseInt(parsedCoords[2])};
  61. 														
  62. 							var circle = document.createElementNS(svgNs, "circle");
  63. 							circle.setAttributeNS(null, "cx", coords.x);
  64. 							circle.setAttributeNS(null, "cy", coords.y);
  65. 							circle.setAttributeNS(null, "r", coords.radius);
  66. 							circle.setAttributeNS(null, "fill", randomColor()); 
  67. 							
  68. 							newLink.appendChild(circle);
  69. 							break;
  70. 						case "poly":														
  71. 							
  72. 							var parsedCoords = map.areas[a].getAttribute("coords").split(",");
  73. 							var coords = "";
  74. 							for(var c = 0; c < parsedCoords.length; c += 2)
  75. 							{
  76. 								coords += parsedCoords[c] + "," + parsedCoords[c + 1] + " ";
  77. 							}
  78. 							
  79. 							var poly = document.createElementNS(svgNs, "polygon");
  80. 							poly.setAttributeNS(null, "points", coords);
  81. 							poly.setAttributeNS(null, "fill", randomColor());
  82. 							
  83. 							newLink.appendChild(poly);
  84. 							break;
  85. 						default:
  86. 							break;
  87. 					}
  88. 					newSVG.appendChild(newLink);
  89. 				}
  90. 			}
  91. 		}
  92. 	});
  93. }
  94.  
  95. function randomColor() {
  96. 	var color = "rgb("
  97. 	var colorValues = [];
  98. 	for(var c = 0; c < 3; c++)
  99. 	{
  100. 		colorValues.push(Math.floor(Math.random()*256));
  101. 	}
  102. 	color += colorValues + ")";
  103. 	return color;
  104. }