JSFiddle - React, Tailwind, and code Playground
by javadoug
HTML
<img id="img" src="http://www.nws.noaa.gov/nwr/Maps/usamap.gif" border="0" width="771" height="448" orgWidth="771" orgHeight="448" usemap="#map" alt="" />
<map name="map" id="map">
<area id="WY" alt="WY" title="WY here" href="javascript: message('hello'); return http://www.image-maps.com/" shape="poly" coords="313,137,274,133,270,153,309,161" style="fill:red;" target="_self" />
</map>
JavaScript
(function (G) {
var B, J, C, K, N, M, I, E, H, A, L;
J = !! document.createElement("canvas").getContext;
B = (function () {
var P = document.createElement("div");
P.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var O = P.firstChild;
O.style.behavior = "url(#default#VML)";
return O ? typeof O.adj == "object" : true
})();
if (!(J || B)) {
G.fn.maphilight = function () {
return this
};
return
}
if (J) {
E = function (O) {
return Math.max(0, Math.min(parseInt(O, 16), 255))
};
H = function (O, P) {
return "rgba(" + E(O.substr(0, 2)) + "," + E(O.substr(2, 2)) + "," + E(O.substr(4, 2)) + "," + P + ")"
};
C = function (O) {
var P = G('<canvas style="width:' + O.width + "px;height:" + O.height + 'px;"></canvas>').get(0);
P.getContext("2d").clearRect(0, 0, P.width, P.height);
return P
};
var F = function (Q, O, R, P, S) {
P = P || 0;
S = S || 0;
Q.beginPath();
if (O == "rect") {
Q.rect(R[0] + P, R[1] + S, R[2] - R[0], R[3] - R[1])
} else {
if (O == "poly") {
Q.moveTo(R[0] + P, R[1] + S);
for (i = 2; i < R.length; i += 2) {
Q.lineTo(R[i] + P, R[i + 1] + S)
}
} else {
if (O == "circ") {
Q.arc(R[0] + P, R[1] + S, R[2], 0, Math.PI * 2, false)
}
}
}
Q.closePath()
};
K = function (Q, T, U, X, O) {
var S, P = Q.getContext("2d");
if (X.shadow) {
P.save();
if (X.shadowPosition == "inside") {
F(P, T, U);
P.clip()
}
var R = Q.width...