Div rollover

JavaScript
1

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 :slight_smile:

2

I’m assuming you’re talking about the hover effect :wink:

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

Markup sample:

<ul class="items">
	<li>
		<a href="#">Some link</a>
		<div class="over">Some content</div>
	</li>
</ul>

Which would have some basic 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:

//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:

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

3 
<!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>