<!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[*/
.pop {
position:absolute;z-Index:101;visibility:hidden;top:400px;width:200px;height:150px;background-Color:red;padding:5px;
}
.popimg {
position:relative;top:100px;width:120px;height:160px;border:solid red 1px;float:left;margin-Left:20px;
}
.title {
position:absolute;left:0px;top:140px;width:120px;height:20px;background-Color:red;text-Align:center;
}
/*]]>*/
</style>
</head>
<body>
<div id="img1" class="popimg" >
<img src="http://poptech.org/system/web_images/1140/original/annmarie_ahearn.jpg" />
<div class="title" >Some Text</div>
</div>
<div id="img2" class="popimg" >
<img src="http://poptech.org/system/web_images/1140/original/annmarie_ahearn.jpg" />
<div class="title" >Some Text</div>
</div>
<div id="img1pop" class="pop" >Some Text</div>
<div id="img2pop" class="pop" >Some More Text</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcTitle(o){
var reg=new RegExp('\\\\b'+o.CommonClass+'\\\\b'),els=document.getElementsByTagName('DIV'),div,z0=0,z1=0,ms=o.Duration,opac=o.Opacity;
for (; z0<els.length;z0++){
div=els[z0].getElementsByTagName('DIV')[0];
if(reg.test(els[z0].className)&&div){
new zxcTitleOOP(els[z0],div,ms,opac);
}
}
}
function zxcTitleOOP(obj,div,ms,opac){
var oop=this,s=div.offsetTop;
obj.style.overflow='hidden';
this.obj=div
this.mm=[s,obj.offsetHeight];
this.ms=typeof(ms)=='number'?ms:500;
this.now=s;
if (typeof(opac)=='number'){
div.style.filter='alpha(opacity='+opac+')';
div.style.opacity=div.style.MozOpacity=div.style.WebkitOpacity=div.style.KhtmlOpacity=opac/100-.001;
}
obj.onmouseover=function(){ oop.mse(true); }
obj.onmouseout=function(){ oop.mse(false); }
}
zxcTitleOOP.prototype={
mse:function(ud){
this.animate(this.now,this.mm[ud?1:0],new Date(),this.ms);
},
animate:function(s,f,srt,mS){
var oop=this,op=oop.oop,ms=new Date().getTime()-srt,now=(f-s)/mS*ms+s;
if (isFinite(now)){
oop.now=now;
oop.obj.style.top=now+'px';
}
if (ms<mS){
oop.dly=setTimeout(function(){oop.animate(s,f,srt,mS); },10);
}
else {
oop.now=f;
oop.obj.style.top=f+'px';
}
}
}
function zxcPop(o){
var reg=new RegExp('\\\\b'+o.CommonClass+'\\\\b'),els=document.getElementsByTagName('DIV'),ary=[],id,div,img,z0=0,z1=0,x=o.XOffset,y=o.YOffset,ms=o.FadeDuration;
for (; z0<els.length;z0++){
id=els[z0].id
if(reg.test(els[z0].className)&&id){
div=document.getElementById(id+'pop');
img=els[z0].getElementsByTagName('IMG')[0];
if (div&&img){
ary.push(new zxcPopOOP(img,div,x,y,ms));
}
}
}
}
function zxcPopOOP(obj,div,x,y,ms){
var oop=this;
this.obj=obj;
this.pop=div;
this.x=typeof(x)=='number'?x:obj.offsetWidth+5;
this.y=typeof(y)=='number'?y:-div.offsetHeight-5;
this.ms=typeof(ms)=='number'?ms:false;
this.now=0;
obj.onmouseover=function(){ oop.mse(true); }
obj.onmouseout=function(){ oop.mse(false); }
}
zxcPopOOP.prototype={
mse:function(ud){
var pos=this.pos(this.obj),pop=this.pop,ms=this.ms;
pop.style.left=pos[0]+this.x+'px';
pop.style.top=pos[1]+this.y+'px';
pop.style.visibility=ms||ud?'visible':'hidden';
if (ms){
this.animate(this.now,ud?100:0,new Date(),ms);
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
animate:function(s,f,srt,mS){
var oop=this,op=oop.oop,ms=new Date().getTime()-srt,now=(f-s)/mS*ms+s,obj=this.pop;
if (isFinite(now)){
oop.now=now;
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
oop.dly=setTimeout(function(){oop.animate(s,f,srt,mS); },10);
}
else {
oop.now=f;
if (f==0){
obj.style.visibility='hidden';
}
}
}
}
zxcTitle({
CommonClass:'popimg', // the common class name of the DIVs to apply the effect. (string)
Duration:500, //(optional) the title DIV slide duration in milli seconds. (number, default = 500)
Opacity:70 //(optional) the opacity of the title DIV. (number, default = no opacity)
});
zxcPop({
CommonClass:'popimg', // the common class name of the DIVs to apply the effect. (string)
XOffset:130, //(optional) x offset of the popup. (number, default = left of the DIV)
YOffset:0, //(optional) y offset of the popup. (number, default = above of the DIV)
FadeDuration:500 //(optional) the fade duration in milli seconds. (number, default = no fade effect)
});
/*]]>*/
</script>
</body>
</html>