☰

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 提交的版本，查看 最新版本。

  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. Only supports RECT areas for now.
  5. // @version       0.9.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().x, y: pic.getBoundingClientRect().y};
  27. 				var map = document.body.querySelector("[name = " + pic.getAttribute("usemap").substring(1) + "]");
  28. 				for(a = 0; a < map.areas.length; a++)
  29. 				{
  30. 					switch(map.areas[a].getAttribute("shape"))
  31. 					{
  32. 						case "rect":
  33. 						case "RECT":
  34. 							var parsedCoords = /(\d+),\s?(\d+),\s?(\d+),\s?(\d+)/.exec(map.areas[a].getAttribute("coords"));
  35. 							var coords = {x: parseInt(parsedCoords[1]), y: parseInt(parsedCoords[2])};
  36. 							coords.width = parseInt(parsedCoords[3]) - coords.x;
  37. 							coords.height = parseInt(parsedCoords[4]) - coords.y;
  38. 							var areaLink = document.createElement("A");
  39. 							areaLink.href = map.areas[a].href;
  40. 							areaLink.style.position = "absolute";
  41. 							areaLink.style.left = picOffset.x + coords.x + "px";
  42. 							areaLink.style.top = picOffset.y + coords.y + "px";
  43. 							areaLink.style.backgroundColor = randomColor();
  44. 							areaLink.style.width = coords.width + "px";
  45. 							areaLink.style.height = coords.height + "px";
  46. 							break;
  47. 						case "circle":
  48. 						case "CIRCLE":
  49. 							var parsedCoords = /(\d+),\s?(\d+),\s?(\d+)/.exec(map.areas[a].getAttribute("coords"));
  50. 							var coords = {x: parseInt(parsedCoords[1]), y: parseInt(parsedCoords[2])};
  51. 							coords.radius = parseInt(parsedCoords[3]);
  52. 							var areaLink = document.createElement("A");
  53. 							areaLink.href = map.areas[a].href;
  54. 							areaLink.style.position = "absolute";
  55. 							areaLink.style.left = (picOffset.x + coords.x - coords.radius) + "px";
  56. 							areaLink.style.top = (picOffset.y + coords.y - coords.radius) + "px";
  57. 							areaLink.style.backgroundColor = randomColor();
  58. 							areaLink.style.width = areaLink.style.height = (coords.radius * 2) + "px";
  59. 							areaLink.style.borderRadius = coords.radius + "px";
  60. 							break;
  61. 						default:
  62. 							break;
  63. 					}
  64. 					areaLink.style.color = "white";
  65. 					areaLink.style.overflow = "auto";
  66. 					pic.parentNode.insertBefore(areaLink, pic.nextSibling);
  67. 					
  68. 				}
  69. 			}
  70. 		}
  71. 	});
  72. }
  73.  
  74. function randomColor() {
  75. 	var color = "rgb("
  76. 	var colorValues = [];
  77. 	for(var c = 0; c < 3; c++)
  78. 	{
  79. 		colorValues.push(Math.floor(Math.random()*256));
  80. 	}
  81. 	color += colorValues + ")";
  82. 	return color;
  83. }