SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interesting hover effect - which javascript library/script could accomplish this?

    Hi There,

    I've come across this interesting site - just see what happens when you hover over each image:
    http://poptech.org/speakers?utm_sour...m_medium=email

    Could this sort of thing be accomplished fairly easily with an existing javascript library/script? A jquery script would be ideal if such a thing exists.

    Thanks,
    Dan

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;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>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, with some tweaking to the fade times that is perfect. Is this your own work then?

    Thanks alot.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,822
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The zxc prefix on function names identifies the author as Nicholas Zakas.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is mine

    Vic Phillips

    see the link below


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
  •