Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.window {
position:absolute;width:100px;height:100px;border:solid red 1px;
}
#myimage{
width:500px;height:250px;cursor:move;border-Width:0px;
}
/*]]>*/
</style></head>
<body>
<img id="myimage" src="http://www.vicsjavascripts.org/StdImages/World2.jpg" alt="world" usemap="#world" ismap="ismap" >
<map name="world" id="world" >
<area shape="poly" coords="261,74,241,79,225,94,233,116,258,119,270,137,264,148,275,170,292,171,296,155,308,148,303,132,321,111,307,106,297,82">
<area shape="poly" coords="151,108,203,132,154,203,143,196,154,152,138,129">
<area shape="poly" coords="141,113,166,99,139,79,180,58,165,27,20,28,21,45,35,49,46,41,81,61,73,75,88,84,107,102">
<area shape="poly" coords="284,22,308,31,302,61,275,76,258,65,246,73,234,70,235,49,246,36">
<area shape="poly" coords="314,31,305,73,323,88,353,96,352,114,366,120,362,99,383,95,386,118,409,106,401,93,423,85,495,39,441,21,391,16,348,25">
<area shape="poly" coords="406,156,432,137,446,150,446,139,454,151,464,164,458,178,449,182,438,167,414,172">
</map>
<script type="text/javascript">
/*<![CDATA[*/
// ZoomImage(with Image Maps) (03-July-2014)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
var zxcZoomImage={
init:function(o){
var id=o.ImageID,wc=o.WindowClass,src=o.ZoomSRC,z=o.Zoom,zm=o.ZoomMin,zx=o.ZoomMax,zi=o.ZoomIncrement,map=document.getElementById(o.ImageMapID),i=document.getElementById(id);
if (i&&i.nodeName.toUpperCase()=='IMG'){
var w=document.createElement('DIV'),wi=map?i.cloneNode(false):document.createElement('DIV'),sz,as,z0=0;
w.style.position=wi.style.position='absolute';
w.style.left=w.style.top='-3000px';
w.style.overflow='hidden';
wi.src=typeof(src)=='string'?src:i.src;
w.className=wc;
w.appendChild(wi);
document.body.appendChild(w);
o.iw=i.width;
o.ih=i.height;
sz=this.css(w,'width');
o.ww=sz>0?sz/2:o.iw/8;
sz=this.css(w,'height');
o.wh=sz>0?sz/2:o.ih/8;
w.style.width=o.ww*2+'px';
w.style.height=o.wh*2+'px';
o.i=i;
o.w=w;
o.wi=wi;
o.a=[];
if (map){
as=map.getElementsByTagName('AREA');
for (;z0<as.length;z0++){
o.a.push([as[z0],as[z0].coords.split(',')]);
}
}
o.z=typeof(z)=='number'&&z>=1?z:2;
o.zm=typeof(zm)=='number'&&zm>=1?zm:2;
o.zx=typeof(zx)=='number'&&zx>o.zx?zx:5;
o.zi=typeof(zi)=='number'?zi:0.1;
o.m=[0,0];
this.addevt(i,'mouseover','start',o);
if (!this.srt){
this.addevt(document,'mousemove','move');
document.addEventListener?this.addevt(document,'DOMMouseScroll','wheel'):null;
this.addevt(document,'mousewheel','wheel');
this.srt=true;
}
}
},
start:function(e,o){
this.o=o;
this.coords(o,o.z);
},
stop:function(e,o){
var oop=this;
o.w.style.left=o.w.style.top='-30000px';
oop.coords(o,1);
oop.o=null;
},
move:function(e){
if (this.o){
var o=this.o,p=this.pos(o.i),m=e?this.mse(e):o.m,x=Math.max(Math.min(m[0]-o.ww,p[0]+o.i.width-o.ww),p[0]-o.ww),y=Math.max(Math.min(m[1]-o.wh,p[1]+o.i.height-o.wh),p[1]-o.wh);
o.m=m;
o.wi.style.width=o.iw*o.z+'px';
o.wi.style.height=o.ih*o.z+'px';
o.w.style.left=x+'px';
o.w.style.top=y+'px';
o.wi.style.left=-(x-p[0]+o.ww)*o.z+o.ww+'px';
o.wi.style.top=-(y-p[1]+o.wh)*o.z+o.wh+'px';
m[0]<p[0]||m[0]>p[0]+o.iw||m[1]<p[1]||m[1]>p[1]+o.ih?this.stop(e,o):null;
return e?this.rtn(e):false;
}
},
mse:function(e){
var d=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
return window.event?[e.clientX+d[0],e.clientY+d[1]]:[e.pageX,e.pageY];
},
wheel:function(e){
e=e?e:window.event;
if (this.o){
var o=this.o,ud=(e.detail?e.detail>0?-1:1:e.wheelDelta/40>0?1:-1);
o.z+=ud>0?o.zi:ud<0?-o.zi:0;
o.z=Math.min(Math.max(o.z,o.zm),o.zx);
this.coords(o,o.z);
this.move();
return this.rtn(e);
}
},
rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},
coords:function(o,z){
for (var a,z0a=0,z0=0;z0<o.a.length;z0++){
a=[];
for (z0a=0;z0a<o.a[z0][1].length;z0a++){
a[z0a]=o.a[z0][1][z0a]*o.z;
}
o.a[z0][0].coords=a.join(',');
}
},
pos:function(o){
var r=[0,0];
while(o){
r[0]+=o.offsetLeft;
r[1]+=o.offsetTop;
o=o.offsetParent;
}
return r;
},
css:function(o,p){
return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
}
}
zxcZoomImage.init({
ImageID:'myimage', // the unique ID name of the featured image. (string)
WindowClass:'window', //(optional) the unique ID name of the featured image. (string, default = sized to featured image size/4)
ImageMapID:'world', //(optional) the unique ID name of image map. (string, default = no image map)
ZoomSRC:false, //(optional) the src of the zoom image. (string, default = the featured image src)
Zoom:2, //(optional) the initial zoom image zoom. (number, default = 2)
ZoomMin:1, //(optional) the minimum zoom image zoom. (number, default = 1)
ZoomMax:5, //(optional) the maximum zoom image zoom. (number, default = 5)
ZoomIncrement:0.1 //(optional) the zoom image zoom increment. (number, default = o.1)
});
/*]]>*/
</script>
</body>
</html>
Adding clickable object with Image Power Zoomer v1.1
Reply With Quote
Bookmarks