hover slider

**davelf** · 09-15-2011, 09:10 AM

I don't really know what this script called,
Here's an explanation and some screenshot, about my problem:

this is the first, when we start. When i hover on the image, it will slide up and show the rest like the second image

this is after the hover, the image shows full.

any idea, don't be hesitate to tell me.
Thanks in advanced

**vwphillips** · 09-15-2011, 12:07 PM

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[*/
#slide {
  position:absolute;left:100px;top:100px;width:200px;height:150px;overflow:hidden;background-Color:#FFFFCC;
}

#slide IMG{
  position:absolute;left:0px;top:75px;width:200px;height:150px;
}

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

function Slide(o){
 var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],to=o.Finish,to=typeof(to)=='number'?to:0,ms=o.Duration,ms=typeof(ms)=='number'?ms:1000;
 this.obj=obj;
 this.frto=[img.offsetTop,to];
 this.ms=ms;
 this.now=this.frto[0];
 obj.onmouseover=function(){ oop.slide(img,true); }
 obj.onmouseout=function(){ oop.slide(img,false); }
}

Slide.prototype={

 slide:function(img,ud){
  var e=window.event||arguments.callee.caller.arguments[0];
  if (this.ckevt(e)){
   this.animate(img,this.now,this.frto[ud?1: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;
  if (isFinite(now)){
   this.now=now;
   obj.style.top=now+'px';
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
  }
  else {
   this.now=t;
   obj.style.top=t+'px';  }
 },

 ckevt:function(e){
  var obj=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
  if (!obj||obj==this.obj){
   return false;
  }
  while (obj.parentNode){
   if (obj==this.obj){
    return false;
   }
   obj=obj.parentNode;
  }
  return true;
 }
}
/*]]>*/
</script>

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

function Init(){
 new Slide({
  ID:'slide',
  Finish:0,
  Duration:1000
 });

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div id="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>
</body>

</html>

**azoomer** · 09-15-2011, 02:44 PM

Hi Davelf !
This is my take on it.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hover slide up</title>
<style type="text/css">
body {
	background:#F7F7F7;	
}
#hoverbox {
	width:338px;
	height:332px;
	margin:200px auto;
	background: url(images/SBbackground.png);
	overflow:hidden;
}
#hoverimage {
	position:relative;
	top:120px;
	z-index:10;	
}
#pocketoverlay{
	z-index:100;
	margin-top:-332px;
	position:relative;
	width:338px;
	height:78px;
}
#pocketoverlay img{
	margin-top:254px;
	z-index:100;
	position:relative;
	
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {

      var navDuration = 250; //time in miliseconds
      var navJumpHeight = "120px";

      $('#hoverimage').hover(function() {
          $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
      }, function() {
          $(this).animate({ top : "120px" }, navDuration);
      });        
      });
 </script>
</head>
<body>
<div id="hoverbox">
<div id="hoverimage"> <img src="images/card.png" />
</div>
<div id="pocketoverlay"> <img src="images/pocket.png" />
</div>
</div>
</body>
</html>

**davelf** · 09-16-2011, 03:42 AM

Thanks you so much to both of you. This is perfect.

Thread: hover slider

Thread Tools

Search Thread

hover slider

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions