/** * cvi_map_lib.js 2.4 (14-Aug-2010) (c) by Christian Effenberger * All Rights Reserved. Source: mapper.netzgesta.de * Distributed under Netzgestade Software License Agreement. * This license permits free of charge use on non-commercial * and private web sites only under special conditions. * Read more at... http://www.netzgesta.de/cvi/LICENSE.html * Commercial licenses available via... cvi[at]netzgesta[dot]de * syntax: cvi_map.defaultRadius = 0; //INT 0-100 (px radius) cvi_map.defaultOpacity = 33; //INT 0-100 (% opacity) cvi_map.defaultBordercolor = '#0000ff'; //STR '#000000'-'#ffffff' cvi_map.defaultAreacolor = '#000000'; //STR '#000000'-'#ffffff' cvi_map.defaultNoborder = false; //BOOLEAN cvi_map.defaultNofade = false; //BOOLEAN cvi_map.defaultShowcoords = false; //BOOLEAN cvi_map.defaultImgsrc = ''; //STR (path&file) cvi_map.defaultMapid = ''; //STR (id) cvi_map.remove( image ); cvi_map.add( image, options ); cvi_map.modify( image, options ); cvi_map.add( image, { radius: value, opacity: value, bordercolor: value, areacolor: value, noborder: value, nofade: value, showcoords: value } ); cvi_map.modify( image, { radius: value, opacity: value, bordercolor: value, areacolor: value, noborder: value, nofade: value, showcoords: value, imgsrc: value, mapid: value} ); * showCoords(map_name,area_id,xpos,ypos,width,height); extAreaOver(image_id,area_id); extAreaOut(image_id,area_id); * **/ var canvascheck = document.createElement('canvas'); var isIE = window.navigator.systemLanguage&&(!document.documentMode||document.documentMode<9)?1:0; var isI8 = isIE&&document.documentMode?1:0; var isVM = isIE&&document.namespaces?1:0; var isCV = canvascheck.getContext?1:0; var isJG = 0, jg = new Array(); function showCoords(map,ele,x,y,w,h) {} function getClassValue(classes,string){ var temp = 0; var pos = string.length; for (var j=0;j'; }else if(obj.shape.toLowerCase()=='circle') { t += ''; }else { for(j=2;j'; } } canvas.innerHTML = t; }else if(isCV) { if(f<1) {canvas.fading = 0; canvas.style.opacity = 0;} context = canvas.getContext("2d"); for(a=0;a0 && 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) { var o = document.getElementById(i); var t = findPosXY(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); showCoords(n,a,cx,cy,w,h); } function findPosXY(ele) { var t; var d = {x:ele.offsetLeft, y:ele.offsetTop }; if(ele.offsetParent) { t = findPosXY(ele.offsetParent); d.x += t.x; d.y += t.y;} return d; } function roundedRect(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 getRadius(radius,width,height){ var part = (Math.min(width,height)/100); radius = Math.max(Math.min(100,radius/part),0); return radius + '%'; } var cvi_map = { defaultRadius : 0, defaultOpacity : 33, defaultBordercolor : '#0000ff', defaultAreacolor : '#000000', defaultNoborder : false, defaultNofade : false, defaultShowcoords : false, defaultImgsrc : '', defaultMapid : '', defaultDelayed : false, add: function(image, options) { var map, mapname = image.useMap.split("#"); if(mapname[1]!=''&&mapname[1].length>=1) {map = document.getElementsByName(mapname[1])[0];} if(image.tagName.toUpperCase() == "IMG" && map) { var defopts = { "radius" : cvi_map.defaultRadius, "opacity" : cvi_map.defaultOpacity, "bordercolor" : cvi_map.defaultBordercolor, "areacolor" : cvi_map.defaultAreacolor, "noborder" : cvi_map.defaultNoborder, "nofade" : cvi_map.defaultNofade, "showcoords" : cvi_map.defaultShowcoords, "imgsrc" : cvi_map.defaultImgsrc, "mapid" : cvi_map.defaultMapid, "delayed" : cvi_map.defaultDelayed }; if(options) { for(var i in defopts) { if(!options[i]) { options[i] = defopts[i]; }} }else { options = defopts; } var imageWidth = ('iwidth' in options) ? parseInt(options.iwidth) : image.width; var imageHeight = ('iheight' in options) ? parseInt(options.iheight) : image.height; try { var object = image.parentNode; 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"; var blind, bgrnd, canvas; image.jg = 0; if(isVM) { if(document.namespaces['v']==null) { var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); for(var i=0; i'].join('')); bgrnd = document.createElement([''].join('')); dummy = document.createElement([''].join(''));// NEW }else if(isCV) { canvas = document.createElement('canvas'); bgrnd = document.createElement('canvas'); }else { canvas = document.createElement('div'); bgrnd = document.createElement('img'); bgrnd.src = image.src; if(typeof(window['jsGraphics']) !== 'undefined') { image.jg = parseInt(jg.length); jg[image.jg] = new jsGraphics(canvas); isJG = 1; } } canvas.id = image.id+'_canvas'; 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"; image.options = options; image.canvasid = image.id+'_canvas'; image.dummyid = image.id+'_dummy'; // NEW image.bgrndid = image.id+'_image'; image.blindid = map.name+'_blind'; image.mapname = map.name; image.areas = map.innerHTML; image.active = false; if(isIE) {image.style.filter = "Alpha(opacity=0)";}else {image.style.opacity = 0; image.style.MozOpacity = 0; image.style.KhtmlOpacity = 0;} bgrnd.id = image.bgrndid; bgrnd.left = 0; bgrnd.top = 0; bgrnd.style.position = 'absolute'; bgrnd.style.height = image.height+'px'; bgrnd.style.width = image.width+'px'; bgrnd.style.left = 0+'px'; bgrnd.style.top = 0+'px'; bgrnd.height = image.height; bgrnd.width = image.width; blind = document.createElement('div'); blind.id = image.blindid; blind.className = "blind_area"; blind.left = 0; blind.top = 0; blind.style.position = 'absolute'; blind.style.height = image.height+'px'; blind.style.width = image.width+'px'; blind.style.left = 0+'px'; blind.style.top = 0+'px'; blind.innerHTML = " "; object.insertBefore(canvas,image); object.insertBefore(bgrnd,canvas); object.insertBefore(blind,image); cvi_map.modify(image, options); } catch (e) {} } }, modify: function(image, options) { try { var radius = (typeof options['radius']=='number'?options['radius']:image.options['radius']); image.options['radius']=radius; var opacity = (typeof options['opacity']=='number'?options['opacity']:image.options['opacity']); image.options['opacity']=opacity; var bcolor = (typeof options['bordercolor']=='string'?options['bordercolor']:image.options['bordercolor']); image.options['bordercolor']=bcolor; var acolor = (typeof options['areacolor']=='string'?options['areacolor']:image.options['areacolor']); image.options['areacolor']=acolor; var noborder = (typeof options['noborder']=='boolean'?options['noborder']:image.options['noborder']); image.options['noborder']=noborder; var nofade = (typeof options['nofade']=='boolean'?options['nofade']:image.options['nofade']); image.options['nofade']=nofade; var showcoords = (typeof options['showcoords']=='boolean'?options['showcoords']:image.options['showcoords']); image.options['showcoords']=showcoords; var delayed = (typeof options['delayed']=='boolean'?options['delayed']:image.options['delayed']); image.options['delayed']=delayed; var imgsrc = (typeof options['imgsrc']=='string'?options['imgsrc']:image.options['imgsrc']); image.options['imgsrc']=imgsrc; var mapid = (typeof options['mapid']=='string'?options['mapid']:image.options['mapid']); image.options['mapid']=mapid; var context, func, ih = image.height, iw = image.width; var radius = parseInt(Math.min(Math.min(iw/4,ih/4),radius)); var opacity = opacity==0?0.33:opacity/100; var bcolor = performRGBColor(bcolor,'#0000ff'); var acolor = performRGBColor(acolor,'#000000'); var canvas = document.getElementById(image.canvasid); var dummy = document.getElementById(image.dummyid); var bgrnd = document.getElementById(image.bgrndid); var map = document.getElementsByName(image.mapname)[0]; var opac = 100; function replace() { if(mapid!='') { var tmp = document.getElementById(mapid); if(tmp) {map.innerHTML = tmp.innerHTML;} }else { map.innerHTML = image.areas; } } function prepare() { if(!delayed) {replace();} for(var j=0;j=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);} map.areas[j].onmouseover = new Function('setAreaOver(this,"'+canvas.id+'","'+bcolor+'","'+acolor+'",'+opacity+','+noborder+','+nofade+','+image.jg+');'+func); func=map.areas[j].onmouseout; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);} map.areas[j].onmouseout = new Function('setAreaOut(this,"'+canvas.id+'",'+nofade+','+image.jg+');'+func); }else { func = map.areas[j].getAttribute("onmouseover"); map.areas[j].setAttribute("onmouseover","setAreaOver(this,'"+canvas.id+"','"+bcolor+"','"+acolor+"',"+opacity+","+noborder+","+nofade+","+image.jg+");"+func); func = map.areas[j].getAttribute("onmouseout"); map.areas[j].setAttribute("onmouseout","setAreaOut(this,'"+canvas.id+"',"+nofade+","+image.jg+");"+func); } } } } if(showcoords) { var atr, t = findPosXY(image), ph = document.body.scrollHeight, pw = document.body.scrollWidth; if(isVM||isIE) { image.onmousemove = new Function('getCoords(event,"'+image.mapname+'",0,"'+image.id+'",'+t.x+','+t.y+','+iw+','+ih+','+pw+','+ph+');'+image.movefunc); }else { image.setAttribute("onmousemove","getCoords(event,'"+image.mapname+"',0,'"+image.id+"',"+t.x+","+t.y+","+iw+","+ih+","+pw+","+ph+");"+image.movefunc); } if(map.length>0) { for(var j=0;j=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);} map.areas[j].onmousemove = new Function('getCoords(event,"'+image.mapname+'","'+atr+'","'+image.id+'",'+t.x+','+t.y+','+iw+','+ih+','+pw+','+ph+');'+func); }else { func = map.areas[j].getAttribute("onmousemove"); map.areas[j].setAttribute("onmousemove","getCoords(event,'"+image.mapname+"','"+atr+"','"+image.id+"',"+t.x+","+t.y+","+iw+","+ih+","+pw+","+ph+");"+func); } } } } } } } if(canvas && bgrnd && map) { if(isCV) { context = canvas.getContext("2d"); context.clearRect(0,0,canvas.width,canvas.height); }else if(isVM) { canvas.innerHTML = ''; }else { if(isIE) {canvas.style.filter = "Alpha(opacity="+(opacity*100)+")";}else { canvas.style.opacity = opacity; canvas.style.MozOpacity = opacity; canvas.style.KhtmlOpacity = opacity;} if(isJG) {jg[image.jg].clear();} } if(delayed) {replace(); } if(isCV) { if(imgsrc!='') { var img = new Image(); img.onload = function() { context = bgrnd.getContext("2d"); context.clearRect(0,0,bgrnd.width,bgrnd.height); context.save(); if(radius>0) { roundedRect(context,0,0,bgrnd.width,bgrnd.height,radius); context.clip(); } context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,bgrnd.width,bgrnd.height); context.drawImage(img,0,0,bgrnd.width,bgrnd.height); context.restore(); prepare(); } img.src = imgsrc; }else { context = bgrnd.getContext("2d"); context.clearRect(0,0,bgrnd.width,bgrnd.height); context.save(); if(radius>0) { roundedRect(context,0,0,bgrnd.width,bgrnd.height,radius); context.clip(); } context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,bgrnd.width,bgrnd.height); context.drawImage(image,0,0,bgrnd.width,bgrnd.height); context.restore(); prepare(); } }else if(isVM) { if(radius>0) {radius = getRadius(radius,bgrnd.width,bgrnd.height);} bgrnd.innerHTML = ''; prepare(); }else { bgrnd.src = imgsrc!=''?imgsrc:image.src; prepare(); } image.active = true; if(isVM||isIE) { 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.movefunc = func; }else { image.movefunc = image.getAttribute("onmousemove"); } } } catch (e) {} }, remove : function(image) { var ele, object = image.parentNode; if(image.active) { if(isIE) { image.style.filter = "Alpha(opacity=100)";}else {image.style.opacity = 100; image.style.MozOpacity = 100; image.style.KhtmlOpacity = 100;} ele = document.getElementsByName(image.mapname)[0]; ele.innerHTML = image.areas; image.active = false; image.areas = ''; if(isVM||isIE) {image.onmousemove = image.movefunc;}else {image.setAttribute("onmousemove",image.movefunc);} ele = document.getElementById(image.canvasid); if(ele) {object.removeChild(ele);} ele = document.getElementById(image.blindid); if(ele) {object.removeChild(ele);} ele = document.getElementById(image.bgrndid); if(ele) {object.removeChild(ele);} } } }