Code to make image float up on mouseover?

@vwphillipsSep 11.2011 — #

[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;visibility:hidden;left:-70px;top:10px;border:solid red 0px;
 }
 
 /*]]>*/
 </style>
 
 <script type="text/javascript">
 /*<![CDATA[*/
 
 function zxcPop(id,ud,ms,zindex){
 var obj=document.getElementById(id);
 if (!obj.oop){
 obj.oop=new zxcPopOOP(obj,ms,zindex);
 }
 var oop=obj.oop;
 clearTimeout(oop.dly);
 oop.animate(obj,oop.now,oop.mm[ud?0:1],new Date(),oop.ms);
 obj.style.visibility='visible';
 oop.div.style.zIndex=oop.zindex+(ud?10:0)+'';
 }
 
 function zxcPopOOP(obj,ms,zindex){
 var p=obj.parentNode,img=p.getElementsByTagName('IMG')[0];
 this.mm=[-obj.height+img.height,0];
 this.ms=typeof(ms)=='number'?ms:1000;
 this.zindex=typeof(zindex)=='number'?zindex:10;
 this.div=p.parentNode;
 this.now=0;
 }
 
 zxcPopOOP.prototype={
 
 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.top=now+'px';
 this.now=now;
 }
 if (ms<mS){
 oop.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
 }
 else if (t==0){
 obj.style.visibility='hidden';
 
 }
 }
 
 }
 
 
 
 /*]]>*/
 </script>
 </head>
 
 <body>
 <div style='position:absolute;margin-left:264px;margin-top:592px;width:96px;height:96px;z-index:15'>
 <a href="http://www.ilovelincolnnebraska.com/?q=node/6">
 <img style="border:0px solid black" src="http://www.ilovelincolnnebraska.com/HPImages/AstreetNamedO1.JPG" name="street" border="0" onmouseover="zxcPop('pop1',true,1000,15);"  title="A Street Named O" />
 <img id="pop1" class="pop" src="http://www.ilovelincolnnebraska.com/HPImages/O_street_pop1.jpg"  onmouseout="zxcPop('pop1',false);"/>
 </a>
 </div>
 <div style='position:absolute;margin-left:424px;margin-top:592px;width:96px;height:96px;z-index:15'>
 <a href="http://www.ilovelincolnnebraska.com/?q=node/6">
 <img style="border:0px solid black" src="http://www.ilovelincolnnebraska.com/HPImages/AstreetNamedO1.JPG" name="street" border="0" onmouseover="zxcPop('pop2',true,1000,15);"  title="A Street Named O" />
 <img id="pop2" class="pop" src="http://www.ilovelincolnnebraska.com/HPImages/O_street_pop1.jpg"  onmouseout="zxcPop('pop2',false);"/>
 </a>
 </div>
 
 </body>
 
 </html>[/CODE]

Code to make image float up on mouseover?

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Code to make image float up on mouseover?

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴