| Line 1: |
Line 1: |
| − | $(document).ready(function() { | + | $(document).ready(function() { |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | function start(){
| |
| | | | |
| − | var areaOpacity = "0.1";
| + | function start() { |
| − | //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.
| + | var areaOpacity = "0.1"; |
| − |
| + | //In this part it receives the original Image and the given areas for the ImageMap. |
| − | //The original Image gets set to very low opacity, so its still there and the user can click on the original created areas.
| + | var img = $("img[usemap^='#ImageMap_']")[0]; |
| − | img.setAttribute("style","opacity:0.01; -moz-opacity:0.5; filter:alpha(opacity=50)");
| + | var areas = $("map[name^='ImageMap_']").children(); |
| − | 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){
| + | var canv = document.createElement('canvas'); //A canvas gets created, where it will draw the areas. |
| | | | |
| − | ctx.lineTo(coords.shift(), coords.shift()); | + | //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; |
| | + | 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. |
| | + | img.parentNode.insertBefore(img2, img); |
| | | | |
| − | }
| + | //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; |
| | + | $(canv).insertAfter("map[name^='ImageMap_']"); |
| | + | var ctx = canv.getContext("2d"); |
| | | | |
| − | ctx.closePath();
| + | //The three draw functions can take the paramenters "coords" and "color". |
| − | ctx.stroke();
| + | //With these parameters they draw the areas on the canvas. |
| − | ctx.fillStyle = color;
| + | function drawSingleCircle(coords, 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;
| + | var x1 = coords[0]; |
| − | coords = coords.split(",");
| + | var y1 = coords[1]; |
| − | drawSingleRect(coords,"red");
| + | var r = coords[2]; |
| − | }
| + | ctx.save(); |
| − |
| + | ctx.beginPath(); |
| − | function circleMouseOverEvent(area){
| + | ctx.arc(x1, y1, r, 0, Math.PI * 2); |
| | + | ctx.fillStyle = color |
| | + | ctx.closePath(); |
| | + | ctx.stroke(); |
| | + | ctx.fill(); |
| | + | ctx.restore(); |
| | + | }; |
| | | | |
| − | var coords = area.coords;
| + | function drawSingleRect(coords, color) { |
| − | coords = coords.split(",");
| |
| − | drawSingleCircle(coords,"red");
| |
| − | }
| |
| − |
| |
| − | function polyMouseOverEvent(area){
| |
| | | | |
| − | var coords = area.coords;
| + | var x1 = coords[0]; |
| − | coords = coords.split(",");
| + | var y1 = coords[1]; |
| − | drawSinglePolygon(coords,"red");
| + | 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) { |
| − | //After the cursor has left the area, it will be drawn in blue again.
| + | |
| − | function mouseOutEvent(area){
| + | ctx.save(); |
| − | drawAll();
| + | ctx.beginPath(); |
| − | }
| + | ctx.moveTo(coords.shift(), coords.shift()); |
| − |
| + | |
| − |
| + | while (coords.length) { |
| − | //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){
| + | ctx.lineTo(coords.shift(), coords.shift()); |
| − |
| + | |
| − | var coords = area.coords;
| + | } |
| − | coords = coords.split(",");
| + | |
| − |
| + | ctx.closePath(); |
| − | if(area.shape == "rect"){
| + | ctx.stroke(); |
| − | drawSingleRect(coords,"blue");
| + | ctx.fillStyle = color; |
| − | }
| + | ctx.fill(); |
| − | else if(area.shape == "circle"){
| + | ctx.closePath(); |
| − | drawSingleCircle(coords,"blue");
| + | ctx.restore(); |
| − | }
| + | } |
| − | else if(area.shape == "poly"){
| + | |
| − | drawSinglePolygon(coords,"blue");
| + | |
| − | }
| + | //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) { |
| − |
| + | |
| − | //The function addEventsToAreas adds the mouseover and mouseout functions to the areas.
| + | var coords = area.coords; |
| − | function addEventsToAreas(){
| + | coords = coords.split(","); |
| − | //var area = 0;
| + | drawSingleRect(coords, "red"); |
| − | for(var i=0; i<areas.length; i++){ | + | } |
| − | var area = areas[i];
| + | |
| − | area.addEventListener('mouseout', function(){mouseOutEvent(this)});
| + | function circleMouseOverEvent(area) { |
| − | if(area.shape=="rect"){
| + | |
| − | area.addEventListener('mouseover', function(){rectMouseOverEvent(this)});
| + | var coords = area.coords; |
| − | }
| + | coords = coords.split(","); |
| − | }
| + | drawSingleCircle(coords, "red"); |
| − |
| + | } |
| − | for(var i=0; i<areas.length; i++){ | + | |
| − | var area2 = areas[i];
| + | function polyMouseOverEvent(area) { |
| − | if(area2.shape=="poly"){
| + | |
| − | area2.addEventListener('mouseover', function(){polyMouseOverEvent(this);});
| + | var coords = area.coords; |
| − | }
| + | coords = coords.split(","); |
| − | }
| + | drawSinglePolygon(coords, "red"); |
| − |
| + | |
| − | for(var i=0; i<areas.length; i++){ | + | } |
| − | var area3 = areas[i];
| + | |
| − | if(area3.shape=="circle"){
| + | //After the cursor has left the area, it will be drawn in blue again. |
| − | area3.addEventListener('mouseover', function(){circleMouseOverEvent(this);});
| + | 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) { |
| − | //The drawAll function runs through all given areas and draws them on the canvas.
| + | |
| − | function drawAll(){
| + | var coords = area.coords; |
| − |
| + | coords = coords.split(","); |
| − | ctx.clearRect(0, 0, canv.width, canv.height);
| + | |
| − | for(var i=0; i<areas.length; i++){ | + | if (area.shape == "rect") { |
| − | var area = areas[i];
| + | drawSingleRect(coords, "blue"); |
| − | drawArea(area);
| + | } 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 mhs = document.getElementsByClassName("imageMapHighlighter"); |
| | + | if (mhs.length > 0) { |
| | + | start(); |
| | } | | } |
| − | }
| |
| − |
| |
| − | function init(){
| |
| − | drawAll();
| |
| − | addEventsToAreas();
| |
| − | }
| |
| − |
| |
| − | mw.loader.using( ['mediawiki.util'] ).done( init );};
| |
| − | var mhs2 = document.getElementsByClassName("imageMapHighlighter");
| |
| | | | |
| − | if(mhs2.length > 0){
| |
| − | start();
| |
| − | }
| |
| − |
| |
| | }); | | }); |
