<!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[*/
.popclass {
border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<center>
<br /><br /><br /><br /><br />
<a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100"/></a>
<a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" width="100"/></a>
</center>
<br /><br /><br /><br /><br />
<a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100"/></a>
<a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" width="100"/></a>
<p align="right">
<br /><br /><br /><br /><br />
<a rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100"/></a>
<a rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" width="100"/></a>
</p><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var magnify={
init:function(nme){
var as=document.getElementsByTagName('A'),rel,img,obj,i,z0=0,z0a;
for (;z0<as.length;z0++){
img=as[z0].getElementsByTagName('IMG')[0];
rel=as[z0].rel;
if (rel&&img){
rel=rel.split(' ');
if (rel[0]==nme){
obj={nme:nme+z0,img:img,src:as[z0].href}
for (z0a=1;z0a<rel.length;z0a++){
i=rel[z0a].indexOf(':')
if (i>2){
obj[rel[z0a].substring(0,i).toLowerCase()]=rel[z0a].substring(i+1);
}
}
as[z0].removeAttribute('href');
this.create(obj,img);
}
}
}
},
create:function(obj,img){
obj.mag=isFinite(obj.magnifyby)?obj.magnifyby:2;
var pop=document.createElement('IMG');
pop.style.position='absolute';
pop.style.left='-3000px';
pop.style.top='-3000px';
pop.className=obj.popclass;
obj.pop=pop
document.body.appendChild(obj.pop);
this.addevt(img,'mouseover','show',obj);
this.addevt(pop,'mouseout','hide',obj);
},
show:function(obj,e){
if (!obj.pop.src){
clearTimeout(this.to);
var nimg=new Image();
nimg.src=obj.src||obj.img.src;
return this.load(obj,nimg);
}
var img=obj.img,pop=obj.pop,p=this.pos(obj.img),wwhs=this.wwhs(),pw=pop.offsetWidth,ph=pop.offsetHeight;
pop.style.left=Math.min(Math.max(p[0]+(img.offsetWidth-pw)/2,wwhs[2]+5),wwhs[2]+wwhs[0]-pw-5)+'px';
pop.style.top=Math.min(Math.max(p[1]+(img.offsetHeight-ph)/2,wwhs[3]+5),wwhs[3]+wwhs[1]-ph-5)+'px';
},
hide:function(obj,e){
obj.pop.style.left='-3000px';
obj.pop.style.top='-3000px';
},
load:function(obj,nimg){
var oop=this;
if (nimg.width<50){
oop.to=setTimeOut(function(){ oop.load(obj,nimg); },100);
}
else {
obj.pop.src=nimg.src;
obj.pop.style.width=obj.img.width*obj.mag+'px';
obj.pop.style.height=obj.img.height*obj.mag+'px';
oop.show(obj);
}
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
}
magnify.init('Magnify');
/*]]>*/
</script>
</body>
</html>