Controlling Image Windows on Mouseover
Some time back I came across a site that used a small version of an image as the legend for a larger version of the same image. The small version was displayed in full, but the larger version was displayed in a window of reduced size. When you moved the mouse over the small image the same area of the larger image was displayed in its window. I hope this makes sense. I'm trying to figure out how to do this? Can someone point me in the right direction?
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>
</head>
<body>
<img id="p1" src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300px;">
<div id="p1M" style="position:relative;width:400px;height:300px;border:solid red 1px;" >
<img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300%;">
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script type="text/javascript">
/*<![CDATA[*/
var zxcPan={
init:function(o){
var img=document.getElementById(o.ID),mp=document.getElementById(o.MainID),mimg=mp.getElementsByTagName('IMG')[0],obj;
mp.style.overflow='hidden';
mimg.style.position='absolute';
obj={
img:img,
mp:mp,
mimg:mimg,
osx:mp.offsetWidth/2,
osy:mp.offsetHeight/2
}
this.addevt(img,'mousemove','pan',obj);
},
pan:function(e,obj){
var m=this.mse(e),p=this.pos(obj.img),x=m[0]-p[0],y=m[1]-p[1],w=obj.mimg.width,h=obj.mimg.height;
obj.mimg.style.left=Math.max(Math.min(-x/(obj.img.width/w)+obj.osx,0),-w+obj.osx*2)+'px';
obj.mimg.style.top=Math.max(Math.min(-y/(obj.img.height/h)+obj.osy,0),-h+obj.osy*2)+'px';
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
}
zxcPan.init({
ID:'p1',
MainID:'p1M'
});
/*]]>*/
</script>
</body>
</html>
Followup Question
Thanks Vic. I think I understand most of the code. Is this copyrighted? I'd like to use parts of it with our history museum web site.
use it as you wish
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>
</head>
<body>
<img id="p1" src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300px;">
<div id="p1M" style="position:relative;width:400px;height:300px;border:solid red 1px;" >
<img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300%;">
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Pan Image (01-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcPan={
init:function(o){
var img=document.getElementById(o.ID),mp=document.getElementById(o.MainID),mimg=mp.getElementsByTagName('IMG')[0],obj;
mp.style.overflow='hidden';
mimg.style.position='absolute';
obj={
img:img,
mp:mp,
mimg:mimg,
osx:mp.offsetWidth/2,
osy:mp.offsetHeight/2
}
this.addevt(img,'mousemove','pan',obj);
},
pan:function(e,obj){
var m=this.mse(e),p=this.pos(obj.img),x=m[0]-p[0],y=m[1]-p[1],w=obj.mimg.width,h=obj.mimg.height;
obj.mimg.style.left=Math.max(Math.min(-x/(obj.img.width/w)+obj.osx,0),-w+obj.osx*2)+'px';
obj.mimg.style.top=Math.max(Math.min(-y/(obj.img.height/h)+obj.osy,0),-h+obj.osy*2)+'px';
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
}
zxcPan.init({
ID:'p1',
MainID:'p1M'
});
/*]]>*/
</script>
</body>
</html>
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks