Results 1 to 2 of 2

Thread: Popup Image on ROll over

  1. #1
    Join Date
    May 2009
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Post Popup Image on ROll over

    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.....

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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[*/
    #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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •