I am trying to get map highlight to work onclick, but I am not sure where to start. Here is the code:
<script type="text/javascript">
$(function () {
$('.map').maphilight();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="map">
<img class="map" src="Iceclimbing_test.jpg" width="944" height="1107" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area id="helmet" shape="poly" coords="361,415,367,409,373,405,378,400,383,396,387,390,391,383,394,376,398,368,402,362,399,358,394,358,389,356,380,352,371,350,363,349,352,350,345,354,336,360,330,366,324,372,320,379,317,384,313,389,310,396,308,403,308,410,311,415,314,419,312,422,313,429,317,437,323,443,327,449,350,439,353,431,356,424" href="#" alt="Helmet" />
</map>
</div>
</body>
</html>
Here is the plugin code:
(function (F) {
var B, C, I, L, K, H, E, G, A, J;
B = document.namespaces;
has_canvas = !! document.createElement("canvas").getContext;
if (!(has_canvas || B)) {
F.fn.maphilight = function () {
return this
};
return
}
if (has_canvas) {
E = function (M) {
return Math.max(0, Math.min(parseInt(M, 16), 255))
};
G = function (M, N) {
return "rgba(" + E(M.substr(0, 2)) + "," + E(M.substr(2, 2)) + "," + E(M.substr(4, 2)) + "," + N + ")"
};
C = function (M) {
var N = F('<canvas style="width:' + M.width + "px;height:" + M.height + 'px;"></canvas>').get(0);
N.getContext("2d").clearRect(0, 0, N.width, N.height);
return N
};
I = function (P, M, S, O, N) {
var R, Q = P.getContext("2d");
Q.beginPath();
if (M == "rect") {
Q.rect(S[0], S[1], S[2] - S[0], S[3] - S[1])
} else {
if (M == "poly") {
Q.moveTo(S[0], S[1]);
for (R = 2; R < S.length; R += 2) {
Q.lineTo(S[R], S[R + 1])
}
} else {
if (M == "circ") {
Q.arc(S[0], S[1], S[2], 0, Math.PI * 2, false)
}
}
}
Q.closePath();
if (O.fill) {
Q.fillStyle = G(O.fillColor, O.fillOpacity);
Q.fill()
}
if (O.stroke) {
Q.strokeStyle = G(O.strokeColor, O.strokeOpacity);
Q.lineWidth = O.strokeWidth;
Q.stroke()
}
if (O.fade) {
F(P).css("opacity", 0).animate({
opacity: 1
}, 100)
}
};
L = function (M) {
M.getContext("2d").clearRect(0, 0, M.width, M.height)
}
} else {
C = function (M) {
return F('<var style="zoom:1;overflow:hidden;display:block;width:' + M.width + "px;height:" + M.height + 'px;"></var>').get(0)
};
I = function (N, Q, R, U, M) {
var S, T, O, P;
S = '<v:fill color="#' + U.fillColor + '" opacity="' + (U.fill ? U.fillOpacity : 0) + '" />';
T = (U.stroke ? 'strokeweight="' + U.strokeWidth + '" stroked="t" strokecolor="#' + U.strokeColor + '"' : 'stroked="f"');
O = '<v:stroke opacity="' + U.strokeOpacity + '"/>';
if (Q == "rect") {
P = F('<v:rect name="' + M + '" filled="t" ' + T + ' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + R[0] + "px;top:" + R[1] + "px;width:" + (R[2] - R[0]) + "px;height:" + (R[3] - R[1]) + 'px;"></v:rect>')
} else {
if (Q == "poly") {
P = F('<v:shape name="' + M + '" filled="t" ' + T + ' coordorigin="0,0" coordsize="' + N.width + "," + N.height + '" path="m ' + R[0] + "," + R[1] + " l " + R.join(",") + ' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:' + N.width + "px;height:" + N.height + 'px;"></v:shape>')
} else {
if (Q == "circ") {
P = F('<v:oval name="' + M + '" filled="t" ' + T + ' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + (R[0] - R[2]) + "px;top:" + (R[1] - R[2]) + "px;width:" + (R[2] * 2) + "px;height:" + (R[2] * 2) + 'px;"></v:oval>')
}
}
}
P.get(0).innerHTML = S + O;
F(N).append(P)
};
L = function (M) {
F(M).find("[name=highlighted]").remove()
}
}
K = function (N) {
var M, O = N.getAttribute("coords").split(",");
for (M = 0; M < O.length; M++) {
O[M] = parseFloat(O[M])
}
return [N.getAttribute("shape").toLowerCase().substr(0, 4), O]
};
J = function (O, N) {
var M = F(O);
return F.extend({}, N, F.metadata ? M.metadata() : false, M.data("maphilight"))
};
A = function (M) {
if (!M.complete) {
return false
}
if (typeof M.naturalWidth != "undefined" && M.naturalWidth == 0) {
return false
}
return true
};
H = {
position: "absolute",
left: 0,
top: 0,
padding: 0,
border: 0
};
var D = false;
F.fn.maphilight = function (O) {
O = F.extend({}, F.fn.maphilight.defaults, O);
if (!has_canvas && F.browser.msie && !D) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var N = document.createStyleSheet();
var M = ["shape", "rect", "oval", "circ", "fill", "stroke", "imagedata", "group", "textbox"];
F.each(M, function () {
N.addRule("v\\:" + this, "behavior: url(#default#VML); antialias:true")
});
D = true
}
return this.each(function () {
var U, R, Y, Q, T, V, X, S, W;
U = F(this);
if (!A(this)) {
return window.setTimeout(function () {
U.maphilight(O)
}, 200)
}
Y = F.extend({}, O, F.metadata ? U.metadata() : false, U.data("maphilight"));
W = U.get(0).getAttribute("usemap");
Q = F('map[name="' + W.substr(1) + '"]');
if (!(U.is("img") && W && Q.size() > 0)) {
return
}
if (U.hasClass("maphilighted")) {
var P = U.parent();
U.insertBefore(P);
P.remove();
F(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")
}
R = F("<div></div>").css({
display: "block",
background: 'url("' + this.src + '")',
position: "relative",
padding: 0,
width: this.width,
height: this.height
});
if (Y.wrapClass) {
if (Y.wrapClass === true) {
R.addClass(F(this).attr("class"))
} else {
R.addClass(Y.wrapClass)
}
}
U.before(R).css("opacity", 0).css(H).remove();
if (F.browser.msie) {
U.css("filter", "Alpha(opacity=0)")
}
R.append(U);
T = C(this);
F(T).css(H);
T.height = this.height;
T.width = this.width;
X = function (b) {
var Z, a;
a = J(this, Y);
if (!a.neverOn && !a.alwaysOn) {
Z = K(this);
I(T, Z[0], Z[1], a, "highlighted");
if (a.groupBy && F(this).attr(a.groupBy)) {
var c = this;
Q.find("area[" + a.groupBy + '="' + F(this).attr(a.groupBy) + '"]').each(function () {
if (this != c) {
var e = J(this, Y);
if (!e.neverOn && !e.alwaysOn) {
var d = K(this);
I(T, d[0], d[1], e, "highlighted")
}
}
})
}
if (!has_canvas) {
F(T).append("<v:rect></v:rect>")
}
}
};
F(Q).bind("alwaysOn.maphilight", function () {
if (V) {
L(V)
}
if (!has_canvas) {
F(T).empty()
}
F(Q).find("area[coords]").each(function () {
var Z, a;
a = J(this, Y);
if (a.alwaysOn) {
if (!V && has_canvas) {
V = C(U.get());
F(V).css(H);
V.width = U.width();
V.height = U.height();
U.before(V)
}
a.fade = a.alwaysOnFade;
Z = K(this);
if (has_canvas) {
I(V, Z[0], Z[1], a, "")
} else {
I(T, Z[0], Z[1], a, "")
}
}
})
});
F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseenter.maphilight", X).bind("mouseout.maphilight", function (Z) {
L(T)
});
U.before(T);
U.addClass("maphilighted")
})
};
F.fn.maphilight.defaults = {
fill: true,
fillColor: "FFFFFF",
fillOpacity: 0.3,
stroke: true,
strokeColor: "EEEEEE",
strokeOpacity: 0.8,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true
}
})(jQuery);
Having scanned through the online docs, there is no option to highlight an area on mouse click. That said, it should be pretty straightforward to modify the script to get what you want. Take a look here on line 318:
You could try changing it to this:
I reckon that will do the trick, but it will still clear the canvas when you move the mouse out of the clicked area.
That should be a start.
Disclaimer: I don’t know if this will work at all.