CSS highlight-map-area.html | Javascript highlight-map-area.html | SVG highlight-map-area.html
Als je met jouw muis over het plaatje gaat, zie je hoe de highlight van de map-area te werk gaat. Plaats de html-code op de plaats waar je de afbeelding wilt hebben en plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina. Pas de coördinaten aan, om een afbeelding van jou te voorzien van een map-area die ge-highlight kan worden. Kijk ook even bij de CSS-variant van de highlight-procedure.
<div><img class="highlight_map_area" src="highlight-map-area.jpg" usemap="#highlight-map-area" width="273" height="390" alt="" /></div>
<map name="highlight-map-area">
<area href="/javascripts/image-effects/highlight-map-area.html" shape="circle" coords="115,49,40" />
<area href="/javascripts/image-effects/highlight-map-area.html" shape="rect" coords="153,0,229,175" />
<area href="/javascripts/image-effects/highlight-map-area.html" shape="poly" coords="157,235,250,232,247,333,138,336,139,302,162,263" />
<area href="/javascripts/image-effects/highlight-map-area.html" shape="poly" coords="38,237,122,236,120,300,114,316,94,340,43,342" />
</map>
<script>
/*global window: false */
/*global self: false */
/*global jsGraphics: false */
/*global hex2dec: true */
var check_canvas = document.createElement('canvas');
var nieuw_ie = window.navigator.systemLanguage && (!document.documentMode || document.documentMode < 9) ? 1 : 0;
var oud_ie = nieuw_ie && document.namespaces ? 1 : 0;
var is_jg = 0;
var is_cv = check_canvas.getContext ? 1 : 0,
y, o, t, i, j, jg = [];
if (oud_ie) {
if (document.namespaces.v === undefined) {
var e = ["shape", "path", "fill", "stroke", "roundrect", "oval", "rect", "arc", "image"],
s = document.createStyleSheet();
for (i = 0; i < e.length; i++) {
s.addRule("v\\:" + e[i], "behavior: url(#default#VML); antialias: true;");
}
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
}
}
function haal_class(klas, string) {
var temp = '';
for (j = 0; j < klas.length; j++) {
if (klas[j] != string) {
if (temp) {
temp += ' ';
}
temp += klas[j];
}
}
return temp;
}
function haal_class_waarde(klas, string) {
var temp = 0;
var pos = string.length;
for (j = 0; j < klas.length; j++) {
if (klas[j].indexOf(string) === 0) {
temp = Math.min(klas[j].substring(pos), 100);
break;
}
}
return Math.max(0, temp);
}
function haal_rgb_class(classes, string, color) {
var temp, val = color,
pos = string.length;
for (j = 0; j < classes.length; j++) {
if (classes[j].indexOf(string) === 0) {
temp = classes[j].substring(pos);
val = temp.toLowerCase();
break;
}
}
if (!val.match(/^[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
val = color || '000000';
}
if (!is_cv) {
return val;
} else {
hex2dec = function(hex) {
return (Math.max(0, Math.min(parseInt(hex, 16), 255)));
};
var cr = hex2dec(val.substr(0, 2)),
cg = hex2dec(val.substr(2, 2)),
cb = hex2dec(val.substr(4, 2));
return cr + ',' + cg + ',' + cb;
}
}
function haal_het_class_attribuut(classes, string) {
var temp = 0;
var pos = string.length;
for (j = 0; j < classes.length; j++) {
if (classes[j].indexOf(string) === 0) {
temp = 1;
break;
}
}
return temp;
}
function haal_mappen(className) {
var children = document.getElementsByTagName('img');
var elements = [];
i = 0;
var mapname = '';
var child;
var classNames;
j = 0;
var mapid = '';
for (i = 0; i < children.length; i++) {
child = children[i];
classNames = child.className.split(' ');
for (j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
mapname = child.useMap.split("#");
if (mapname[1] !== '' && mapname[1].length >= 1) {
mapid = document.getElementsByName(mapname[1]);
if (mapid) {
elements.push(child);
break;
}
}
}
}
}
return elements;
}
function fade_canvas_highlight(id, opac) {
var obj = document.getElementById(id);
if (obj.fading == 1 && opac <= 100) {
obj.style.opacity = opac / 100;
opac += 10;
window.setTimeout("fade_canvas_highlight('" + id + "'," + opac + ")", 10);
}
}
function set_highlight_area(obj, id, bd, co, op, nb, f, z) {
var a, i, j, d, c, o, b, n, l, v, u, x, p, k = 0,
t = '',
r = obj.getAttribute('rel'),
context, canvas = document.getElementById(id);
if (r !== null) {
d = r.split(",");
v = d.unshift(obj.id);
} else {
d = new Array(obj.id);
}
function setAttr() {
if (l.indexOf('iopacity') != -1) {
o = haal_class_waarde(u, "iopacity") / 100;
} else {
o = op;
}
if (l.indexOf('iborder') != -1) {
b = haal_rgb_class(u, "iborder", bd);
} else {
b = bd;
}
if (l.indexOf('icolor') != -1) {
c = haal_rgb_class(u, "icolor", co);
} else {
c = co;
}
if (l.indexOf('noborder') != -1) {
n = haal_het_class_attribuut(u, "noborder");
} else {
n = nb;
}
}
if (oud_ie) {
for (a = 0; a < d.length; a++) {
obj = document.getElementById(d[a]);
if (obj) {
p = '';
l = obj.className;
u = l.split(" ");
v = obj.coords.split(",");
if (k === 0) {
setAttr();
}
if (obj.shape.toLowerCase() == 'rect') {
t += '<v:rect strokeweight="1" filled="t" stroked="' + (n < 1 ? "t" : "f") + '" strokecolor="#' + b + '" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + parseInt(v[0], 10) + 'px;top:' + parseInt(v[1], 10) + 'px;width:' + parseInt(v[2] - v[0], 10) + 'px;height:' + parseInt(v[3] - v[1], 10) + 'px;"><v:fill color="#' + c + '" opacity="' + o + '" /></v:rect>';
} else if (obj.shape.toLowerCase() == 'circle') {
t += '<v:oval strokeweight="1" filled="t" stroked="' + (n < 1 ? "t" : "f") + '" strokecolor="#' + b + '" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + parseInt(v[0] - v[2], 10) + 'px;top:' + parseInt(v[1] - v[2], 10) + 'px;width:' + (parseInt(v[2], 10) * 2) + 'px;height:' + (parseInt(v[2], 10) * 2) + 'px;"><v:fill color="#' + c + '" opacity="' + o + '" /></v:oval>';
} else {
for (j = 2; j < v.length; j += 2) {
p += parseInt(v[j], 10) + ',' + parseInt(v[j + 1], 10) + ',';
}
t += '<v:shape strokeweight="1" filled="t" stroked="' + (n < 1 ? "t" : "f") + '" strokecolor="#' + b + '" coordorigin="0,0" coordsize="' + canvas.width + ',' + canvas.height + '" path="m ' + parseInt(v[0], 10) + ',' + parseInt(v[1], 10) + ' l ' + p + ' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:' + canvas.width + 'px;height:' + canvas.height + 'px;"><v:fill color="#' + c + '" opacity="' + o + '" /></v:shape>';
}
}
}
canvas.innerHTML = t;
} else if (is_cv) {
if (f < 1) {
canvas.fading = 0;
canvas.style.opacity = 0;
}
context = canvas.getContext("2d");
for (a = 0; a < d.length; a++) {
obj = document.getElementById(d[a]);
if (obj) {
l = obj.className;
u = l.split(" ");
v = obj.coords.split(",");
if (k === 0) {
setAttr();
}
context.beginPath();
if (obj.shape.toLowerCase() == 'rect') {
context.rect(0.5 + parseInt(v[0], 10), 0.5 + parseInt(v[1], 10), parseInt(v[2] - v[0], 10), parseInt(v[3] - v[1], 10));
context.closePath();
} else if (obj.shape.toLowerCase() == 'circle') {
context.arc(0.5 + parseInt(v[0], 10), 0.5 + parseInt(v[1], 10), parseInt(v[2], 10), 0, (Math.PI / 180) * 360, false);
} else {
context.moveTo(parseInt(v[0], 10), parseInt(v[1], 10));
for (j = 2; j < v.length; j += 2) {
context.lineTo(parseInt(v[j], 10), parseInt(v[j + 1], 10));
}
context.closePath();
}
context.fillStyle = 'rgba(' + c + ',' + o + ')';
context.strokeStyle = 'rgba(' + b + ',1)';
context.fill();
if (n < 1) {
context.stroke();
}
}
}
if (f < 1) {
canvas.fading = 1;
fade_canvas_highlight(id, 0);
}
} else {
o = op;
l = obj.className;
u = l.split(" ");
if (nieuw_ie) {
canvas.style.filter = "Alpha(opacity=" + (o * 100) + ")";
} else {
canvas.style.opacity = o;
canvas.style.MozOpacity = o;
canvas.style.KhtmlOpacity = o;
}
for (a = 0; a < d.length; a++) {
obj = document.getElementById(d[a]);
if (obj) {
l = obj.className;
u = l.split(" ");
v = obj.coords.split(",");
if (k === 0) {
if (l.indexOf('icolor') != -1) {
c = haal_rgb_class(u, "icolor", co);
} else {
c = co;
}
}
jg[z].setColor("#" + c);
if (obj.shape.toLowerCase() == 'rect') {
jg[z].fillRect(parseInt(v[0], 10), parseInt(v[1], 10), parseInt(v[2] - v[0], 10) + 1, parseInt(v[3] - v[1], 10) + 1);
} else if (obj.shape.toLowerCase() == 'circle') {
jg[z].fillEllipse(parseInt(v[0] - v[2], 10), parseInt(v[1] - v[2], 10), parseInt(v[2], 10) * 2 + 1, parseInt(v[2], 10) * 2 + 1);
} else {
x = [];
y = [];
i = 0;
for (j = 0; j < v.length; j += 2) {
x[i] = parseInt(v[j], 10);
y[i] = parseInt(v[j + 1], 10);
i++;
}
jg[z].fillPolygon(x, y);
}
jg[z].paint();
}
}
}
}
function set_highlight_area_out(obj, id, f, z) {
var canvas = document.getElementById(id);
if (oud_ie) {
canvas.innerHTML = '';
} else if (is_jg) {
jg[z].clear();
} else if (is_cv) {
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
function vind_xy_positie(ele) {
var d = {
x: ele.offsetLeft,
y: ele.offsetTop
};
if (ele.offsetParent) {
t = vind_xy_positie(ele.offsetParent);
d.x += t.x;
d.y += t.y;
}
return d;
}
function haal_coordinaten(e, n, a, i, x, y, w, h, pw, ph) {
var ox, oy, ex, ey, cx, cy, px = 0,
py = 0;
if (!e) {
e = window.event;
}
if (e.pageX || e.pageY) {
px = e.pageX;
py = e.pageY;
}
ex = e.clientX;
ey = e.clientY;
if (self.pageXOffset || self.pageYOffset) {
ox = self.pageXOffset;
if (ox > 0 && px == ex) {
ex -= ox;
}
oy = self.pageYOffset;
if (oy > 0 && py == ey) {
ey -= oy;
}
} else if (document.documentElement) {
ox = document.documentElement.scrollLeft;
oy = document.documentElement.scrollTop;
} else if (document.body) {
ox = document.body.scrollLeft;
oy = document.body.scrollTop;
}
if (document.body.scrollHeight != ph || document.body.scrollWidth != pw) {
o = document.getElementById(i);
t = vind_xy_positie(o);
x = t.x;
y = t.y;
}
cx = Math.min(Math.max(ex + ox - x, 0), w);
cy = Math.min(Math.max(ey + oy - y, 0), h);
}
function round_rect(ctx, x, y, width, height, radius, nopath) {
if (!nopath) {
ctx.beginPath();
}
ctx.moveTo(x, y + radius);
ctx.lineTo(x, y + height - radius);
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
ctx.lineTo(x + width - radius, y + height);
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
ctx.lineTo(x + width, y + radius);
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
ctx.lineTo(x + radius, y);
ctx.quadraticCurveTo(x, y, x, y + radius);
if (!nopath) {
ctx.closePath();
}
}
function get_radius(radius, width, height) {
var part = (Math.min(width, height) / 100);
radius = Math.max(Math.min(100, radius / part), 0);
return radius + '%';
}
function area__map() {
var themaps = haal_mappen('highlight_map_area');
var image, object, achtergrond, canvas, geen_highlight_, context, mapid, mname, ele, atr;
var classes = '',
newClasses = '',
func = '',
tmp, i, j, o, b, c, d, r, t, n, f, x, y, w, h, pw, ph;
for (i = 0; i < themaps.length; i++) {
image = themaps[i];
object = image.parentNode;
if (image.id === '') {
image.id = "gmipam_" + i;
}
object.style.position = (object.style.position == 'static' || object.style.position === '' ? 'relative' : object.style.position);
object.style.height = image.height + 'px';
object.style.width = image.width + 'px';
object.style.padding = 0 + 'px';
object.style.MozUserSelect = "none";
object.style.KhtmlUserSelect = "none";
object.unselectable = "on";
r = 0;
n = 0;
f = 0;
b = 'ff7777';
c = 'ff0000';
o = 33;
if (is_cv) {
canvas = document.createElement('canvas');
} else if (oud_ie) {
canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:' + image.width + 'px;height:' + image.height + 'px;padding:0;">'].join(''));
} else {
canvas = document.createElement('div');
}
canvas.id = image.id + '_canvas';
classes = image.className.split(' ');
r = haal_class_waarde(classes, "iradius");
o = haal_class_waarde(classes, "iopacity");
b = haal_rgb_class(classes, "iborder", 'ff7777');
c = haal_rgb_class(classes, "icolor", 'ff0000');
n = haal_het_class_attribuut(classes, "noborder");
f = haal_het_class_attribuut(classes, "nofade");
o = o === 0 ? 0.33 : o / 100;
r = parseInt(Math.min(Math.min(image.width / 4, image.height / 4), r), 10);
newClasses = haal_class(classes, "highlight_map_area");
image.className = newClasses;
mname = image.useMap.split("#");
mname = mname[1];
mapid = document.getElementsByName(mname);
if (mapid.length > 0) {
for (j = 0; j < mapid[0].areas.length; j++) {
if (mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) {
if (window.opera || mapid[0].areas[j].coords !== '') {
if (mapid[0].areas[j].id === '') {
mapid[0].areas[j].id = mname + '_' + j;
}
if (oud_ie || nieuw_ie) {
func = mapid[0].areas[j].onmouseover;
if (func !== null) {
tmp = String(func);
func = (tmp.indexOf('function') >= 0 ? tmp.match(/\{([^}]+)\}/) : tmp);
func = (typeof(func) == 'object' ? func[1] : func);
}
mapid[0].areas[j].onmouseover = new Function('set_highlight_area(this,"' + canvas.id + '","' + b + '","' + c + '","' + o + '",' + n + ',' + f + ',' + i + ');' + func);
func = mapid[0].areas[j].onmouseout;
if (func !== null) {
tmp = String(func);
func = (tmp.indexOf('function') >= 0 ? tmp.match(/\{([^}]+)\}/) : tmp);
func = (typeof(func) == 'object' ? func[1] : func);
}
mapid[0].areas[j].onmouseout = new Function('set_highlight_area_out(this,"' + canvas.id + '",' + f + ',' + i + ');' + func);
} else {
func = mapid[0].areas[j].getAttribute("onmouseover");
mapid[0].areas[j].setAttribute("onmouseover", "set_highlight_area(this,'" + canvas.id + "','" + b + "','" + c + "','" + o + "'," + n + "," + f + "," + i + ");" + func);
func = mapid[0].areas[j].getAttribute("onmouseout");
mapid[0].areas[j].setAttribute("onmouseout", "set_highlight_area_out(this,'" + canvas.id + "'," + f + "," + i + ");" + func);
}
}
}
}
}
canvas.style.height = image.height + 'px';
canvas.style.width = image.width + 'px';
canvas.height = image.height;
canvas.width = image.width;
canvas.left = 0;
canvas.top = 0;
canvas.style.position = 'absolute';
canvas.style.left = 0 + 'px';
canvas.style.top = 0 + 'px';
canvas.fading = 0;
image.className = '';
image.style.cssText = '';
image.left = 0;
image.top = 0;
image.style.position = 'absolute';
image.style.height = image.height + 'px';
image.style.width = image.width + 'px';
image.style.left = 0 + 'px';
image.style.top = 0 + 'px';
image.style.MozUserSelect = "none";
image.style.KhtmlUserSelect = "none";
image.unselectable = "on";
if (nieuw_ie) {
image.style.filter = "Alpha(opacity=0)";
} else {
image.style.opacity = 0;
image.style.MozOpacity = 0;
image.style.KhtmlOpacity = 0;
}
if (is_cv && r > 0) {
achtergrond = document.createElement('canvas');
} else if (oud_ie && r > 0) {
achtergrond = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:' + image.width + 'px;height:' + image.height + 'px;padding:0;">'].join(''));
} else {
achtergrond = document.createElement('img');
achtergrond.src = image.src;
}
achtergrond.id = image.id + '_image';
achtergrond.left = 0;
achtergrond.top = 0;
achtergrond.style.position = 'absolute';
achtergrond.style.height = image.height + 'px';
achtergrond.style.width = image.width + 'px';
achtergrond.style.left = 0 + 'px';
achtergrond.style.top = 0 + 'px';
object.insertBefore(canvas, image);
geen_highlight_ = document.createElement('div');
geen_highlight_.id = mname + '_geen_highlight_';
geen_highlight_.className = "geen_highlight__area";
geen_highlight_.left = 0;
geen_highlight_.top = 0;
geen_highlight_.style.position = 'absolute';
geen_highlight_.style.height = image.height + 'px';
geen_highlight_.style.width = image.width + 'px';
geen_highlight_.style.left = 0 + 'px';
geen_highlight_.style.top = 0 + 'px';
geen_highlight_.innerHTML = " ";
object.insertBefore(geen_highlight_, image);
if (is_cv) {
context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
} else if (!oud_ie && !is_cv) {
if (nieuw_ie) {
canvas.style.filter = "Alpha(opacity=" + (o * 100) + ")";
} else {
canvas.style.opacity = o;
canvas.style.MozOpacity = o;
canvas.style.KhtmlOpacity = o;
}
if (typeof(window.jsGraphics) !== 'undefined') {
jg[i] = new jsGraphics(canvas);
is_jg = 1;
}
}
object.insertBefore(achtergrond, canvas);
if (is_cv && r > 0) {
achtergrond.height = image.height;
achtergrond.width = image.width;
context = achtergrond.getContext("2d");
context.clearRect(0, 0, achtergrond.width, achtergrond.height);
round_rect(context, 0, 0, achtergrond.width, achtergrond.height, r);
context.clip();
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, achtergrond.width, achtergrond.height);
context.drawImage(image, 0, 0, achtergrond.width, achtergrond.height);
} else if (oud_ie && r > 0) {
achtergrond.height = image.height;
achtergrond.width = image.width;
r = get_radius(r, achtergrond.width, achtergrond.height);
achtergrond.innerHTML = '<v:roundrect arcsize="' + r + '" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:0px;top:0px;width:' + achtergrond.width + 'px;height:' + achtergrond.height + 'px;"><v:fill src="' + image.src + '" type="frame" /></v:roundrect>';
}
if (d > 0) {
ele = document.getElementById(image.id);
w = parseInt(image.width, 10);
h = parseInt(image.height, 10);
t = vind_xy_positie(ele);
x = t.x;
y = t.y;
ph = document.body.scrollHeight;
pw = document.body.scrollWidth;
if (oud_ie || nieuw_ie) {
func = image.onmousemove;
if (func !== null) {
tmp = String(func);
func = (tmp.indexOf('function') >= 0 ? tmp.match(/\{([^}]+)\}/) : tmp);
func = (typeof(func) == 'object' ? func[1] : func);
}
image.onmousemove = new Function('haal_coordinaten(event,"' + mname + '",0,"' + image.id + '",' + x + ',' + y + ',' + w + ',' + h + ',' + pw + ',' + ph + ');' + func);
} else {
func = image.getAttribute("onmousemove");
image.setAttribute("onmousemove", "haal_coordinaten(event,'" + mname + "',0,'" + image.id + "'," + x + "," + y + "," + w + "," + h + "," + pw + "," + ph + ");" + func);
}
if (mapid.length > 0) {
for (j = 0; j < mapid[0].areas.length; j++) {
if (mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) {
if (window.opera || mapid[0].areas[j].coords !== '') {
atr = mapid[0].areas[j].id;
if (oud_ie || nieuw_ie) {
func = mapid[0].areas[j].onmousemove;
if (func !== null) {
tmp = String(func);
func = (tmp.indexOf('function') >= 0 ? tmp.match(/\{([^}]+)\}/) : tmp);
func = (typeof(func) == 'object' ? func[1] : func);
}
mapid[0].areas[j].onmousemove = new Function('haal_coordinaten(event,"' + mname + '","' + atr + '","' + image.id + '",' + x + ',' + y + ',' + w + ',' + h + ',' + pw + ',' + ph + ');' + func);
} else {
func = mapid[0].areas[j].getAttribute("onmousemove");
mapid[0].areas[j].setAttribute("onmousemove", "haal_coordinaten(event,'" + mname + "','" + atr + "','" + image.id + "'," + x + "," + y + "," + w + "," + h + "," + pw + "," + ph + ");" + func);
}
}
}
}
}
}
}
}
if (window.attachEvent) {
window.attachEvent("onload", area__map);
}
else {
window.addEventListener("load", area__map, false);
}
</script>