SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: div rollover...

  1. #1
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div rollover...

    Hello all,

    can anyone help with a bit of script that will work like the 4 panels at the bottom of this page:

    Jaguar UK - Jaguar

    Cheers all

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming you're talking about the hover effect

    If you're using jQuery it's super simple.

    Markup sample:
    Code HTML4Strict:
    <ul class="items">
    	<li>
    		<a href="#">Some link</a>
    		<div class="over">Some content</div>
    	</li>
    </ul>

    Which would have some basic CSS:

    Code CSS:
    /* Parent element styles */
    .items li {
    	width:100px;
    	height:100px;
    	position:relative;
    }
    /* Set child styles */
    .items li a, .items li div 	{
    	display:block;
    	width:100%;
    	height:100%;
    	position:absolute;
    	left:0;
    	top:0;
    }
    /* Finally, hide the div by default */
    .items li div {
    	background:rgba(0,0,0,0.8);
    	color:#fff;
    	display:none;
    }

    And some very short JS:
    Code JavaScript:
    //when a <li> is hovered fadein/out the div
    $(".items li").hover(function(e) {
    	$(this).find("div").fadeIn(200);
    }, function() {
    	$(this).find("div").fadeOut(200);
    });

    If you want to take it to the next level and use some fancy CSS3 (all the cool kids are doing it!), you could modify the CSS to:
    Code CSS:
    .items li div {
    	background:rgba(0,0,0,0.8);
    	color:#fff;
     
    	-webkit-opacity:0;
    	-moz-opacity:0;
    	opacity:0;
    	-webkit-transition:opacity .5s ease;
    	-moz-transition:opacity .5s ease;
    	transition:opacity .5s ease;
    }
    .items li:hover div {
    	-webkit-opacity:1;
    	-moz-opacity:1;
    	opacity:1;
     
    }

    Of course this is only supported in a handful of browser at the moment, though not too hard to write a small detection script that progressively enhances it to have a JS fadein/out if CSS3 transitions aren't supported.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    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">
    .thumb {
     position:relative;width:200px;height:150px;border:solid red 1px;
    }
    
    .thumb IMG {
     position:absolute;left:0px;top:0px;width:200px;height:150px;
    }
    
    .mask {
     position:relative;width:200px;height:150px;background-Color:#FFFFCC;
    }
    </style>
    
    </head>
    
    <body>
    <div class="thumb" >
    <div class="mask" >Your Text</div>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcMask(o){
     var objs=bycls(o.CommonClass,document),op=o.Opacity,op=typeof(op)=='number'?op:50,ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,d,z0=0;
     for (;z0<objs.length;z0++){
      d=objs[z0].getElementsByTagName('DIV')[0];
      if (d){
       new zxcFade(objs[z0],d,op,ms);
      }
     }
    }
    
    function bycls(nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    function zxcFade(obj,d,op,ms){
     var d=d;
     this.addevt(obj,'mouseover','over',d);
     this.addevt(obj,'mouseout','over',d);
     this.obj=obj;
     this.op=op;
     this.ms=ms;
     this.now=0;
    }
    
    zxcFade.prototype={
    
     over:function(e,d){
       clearTimeout(this.dly);
       d.style.zIndex='2';
       this.animate(d,this.now,e.type=='mouseover'?this.op:0,new Date(),this.ms);
     },
    
     animate:function(obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,bimg;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
       this.now=now;
      }
      if (ms<mS){
       oop.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
      }
      else if (t==0){
       obj.style.zIndex='0';
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    }
    
    
    zxcMask({
     CommonClass:'thumb',
     Opacity:60,
     FadeDuration:1000
    });
    /*]]>*/
    </script>
    </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
  •