6,301 bytes added
, 12:52, 23 June 2021
$(document).ready(function() {
function start(){
var areaOpacity = "0.1";
//In this part it receives the original Image, which has a <div>-tag with the "imageMapHighlighter" class.
//When the placement parameter (center, left or right) is set, the <div>-tag number changes, so it has to go deeper to get the image.
var mhs = document.getElementsByClassName("imageMapHighlighter");
if (document.getElementsByClassName('center').length > 0) {
var img = mhs[0].children[0].children[0].children[0].children[1];
var areas = mhs[0].children[0].children[0].children[0].children[0].children;}
else if(document.getElementsByClassName('floatleft').length > 0 || document.getElementsByClassName('floatright').length > 0 ){
var img = mhs[0].children[0].children[0].children[1];
var areas = mhs[0].children[0].children[0].children[0].children;}
else{
var img = mhs[0].children[0].children[1];
var areas = mhs[0].children[0].children[0].children;}
var canv = document.createElement('canvas'); //A canvas gets created, where it will draw the areas.
//The original Image gets set to very low opacity, so its still there and the user can click on the original created areas.
img.setAttribute("style","opacity:0.01; -moz-opacity:0.5; filter:alpha(opacity=50)");
var img2 = new Image();
img2.style = img.style;
img2.width = img.width;
img2.height = img.height;
img2.src = img.src;
if (document.getElementsByClassName('center').length > 0) {
mhs[0].children[0].children[0].children[0].insertBefore(img2, img);}
else if(document.getElementsByClassName('floatleft').length > 0 || document.getElementsByClassName('floatright').length > 0 ){
mhs[0].children[0].children[0].insertBefore(img2, img)}
else{mhs[0].children[0].insertBefore(img2, img);}
img2.style = "position: absolute; opacity: 1";
img2.style.zIndex = "-20"; //After a copy of the original Image is created, it gets set beneath the original image.
//The canvas is given the width and height of the original image.
//It is then placed between the copy and the original image.
canv.id = 'mainCanvas';
canv.width = img.width;
canv.height = img.height;
canv.style.position = "absolute";
canv.style.opacity = areaOpacity;
if (document.getElementsByClassName('center').length > 0) {
mhs[0].children[0].children[0].children[0].insertBefore(canv, img2);}
else if(document.getElementsByClassName('floatleft').length > 0 || document.getElementsByClassName('floatright').length > 0 ){
mhs[0].children[0].children[0].insertBefore(canv, img2);}
else{mhs[0].children[0].insertBefore(canv, img2);}
var ctx = canv.getContext("2d");
//The three draw functions can take the paramenters "coords" and "color".
//With these parameters they draw the areas on the canvas.
function drawSingleCircle(coords,color){
var x1 = coords[0];
var y1 = coords[1];
var r = coords[2];
ctx.save();
ctx.beginPath();
ctx.arc(x1,y1,r,0,Math.PI*2);
ctx.fillStyle = color
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.restore();
};
function drawSingleRect(coords,color){
var x1 = coords[0];
var y1 = coords[1];
var x2 = coords[2];
var y2 = coords[3];
var w = parseInt(x2) - parseInt(x1);
var h = parseInt(y2) - parseInt(y1);
ctx.save();
ctx.fillStyle = color
ctx.fillRect(x1,y1,w,h);
ctx.restore();
};
function drawSinglePolygon(coords, color){
ctx.save();
ctx.beginPath();
ctx.moveTo(coords.shift(), coords.shift());
while (coords.length){
ctx.lineTo(coords.shift(), coords.shift());
}
ctx.closePath();
ctx.stroke();
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
ctx.restore();
}
//The mouseover events can take the areas from the ImageMap.
//Whenever the cursor is over one of the given areas, it is drawn in red.
function rectMouseOverEvent(area){
var coords = area.coords;
coords = coords.split(",");
drawSingleRect(coords,"red");
}
function circleMouseOverEvent(area){
var coords = area.coords;
coords = coords.split(",");
drawSingleCircle(coords,"red");
}
function polyMouseOverEvent(area){
var coords = area.coords;
coords = coords.split(",");
drawSinglePolygon(coords,"red");
}
//After the cursor has left the area, it will be drawn in blue again.
function mouseOutEvent(area){
drawAll();
}
//At the start, the function drawArea gets called by function drawAll and it draws all given areas from the ImageMap in blue.
function drawArea(area){
var coords = area.coords;
coords = coords.split(",");
if(area.shape == "rect"){
drawSingleRect(coords,"blue");
}
else if(area.shape == "circle"){
drawSingleCircle(coords,"blue");
}
else if(area.shape == "poly"){
drawSinglePolygon(coords,"blue");
}
}
//The function addEventsToAreas adds the mouseover and mouseout functions to the areas.
function addEventsToAreas(){
//var area = 0;
for(var i=0; i<areas.length; i++){
var area = areas[i];
area.addEventListener('mouseout', function(){mouseOutEvent(this)});
if(area.shape=="rect"){
area.addEventListener('mouseover', function(){rectMouseOverEvent(this)});
}
}
for(var i=0; i<areas.length; i++){
var area2 = areas[i];
if(area2.shape=="poly"){
area2.addEventListener('mouseover', function(){polyMouseOverEvent(this);});
}
}
for(var i=0; i<areas.length; i++){
var area3 = areas[i];
if(area3.shape=="circle"){
area3.addEventListener('mouseover', function(){circleMouseOverEvent(this);});
}
}
}
//The drawAll function runs through all given areas and draws them on the canvas.
function drawAll(){
ctx.clearRect(0, 0, canv.width, canv.height);
for(var i=0; i<areas.length; i++){
var area = areas[i];
drawArea(area);
}
}
function init(){
drawAll();
addEventsToAreas();
}
mw.loader.using( ['mediawiki.util'] ).done( init );};
var mhs2 = document.getElementsByClassName("imageMapHighlighter");
if(mhs2.length > 0){
start();
}
});
