PDA

View Full Version : Popup Image on ROll over



dhawal.mhatre
06-06-2009, 07:14 AM
Hi.....

I want to make a pop up large image when roll over on thumbnail and when the cursor is roll out the pop up should b closed...

Needed urgently.....


Thanks friends.....:)

vwphillips
06-06-2009, 10:44 AM
<!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;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Pop(obj,url){
var img=document.getElementById('pop');
img.style.visibility='hidden';
if (obj&&url){
img.src=url;
if (img.width<50) return setTimeout(function(){Pop(obj,url);},500)
img.style.visibility='visible';
img.style.left=(zxcPos(obj)[0]<zxcWWHS()[0]/2?zxcPos(obj)[0]+obj.offsetWidth+10:zxcPos(obj)[0]-img.width-10)+'px';
var top=Math.max(zxcPos(obj)[1]-(img.height-obj.offsetHeight)/2,zxcWWHS()[3]+10)
img.style.top=Math.min(top,zxcWWHS()[3]+zxcWWHS()[1]-img.offsetHeight-20)+'px';
}
}

function zxcPos(obj){
var rtn=[obj.offsetLeft,obj.offsetTop];
while(obj.offsetParent!=null){
var objp=obj.offsetParent;
rtn[0]+=objp.offsetLeft-objp.scrollLeft;
rtn[1]+=objp.offsetTop-objp.scrollTop;
obj=objp;
}
return rtn;
}

function zxcWWHS(){
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];
}


/*]]>*/
</script>

</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="Pop(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"
onmouseout="Pop();"/>
<img id="pop" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
</body>

</html>