Text Hover on Image?

**mickkmg** · 05-19-2012, 03:45 PM

Hi guys

i'm trying to get a function happening exactly like this http://www.itsavesyou.com/HoverImageText.htm
but i couldn't get the size of text to be exactly the size of the image.

if anyone can show me how to do this, the right way, it would be very much appreciated

thanks heaps guys

MICK

**vwphillips** · 05-19-2012, 06:49 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[*/

.info {
 position:absolute;z-Index:101;left:-300px;top:-3000px;width:100px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<center>
 <div>
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
  <div class='info' onClick='getPage("/projects/boutique-typeface/");'><h3>Boutique </h3><p>Typeface<br />April  2011 </p></div>
 </div>
 <div>
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
  <div class='info' onClick='getPage("/projects/boutique-typeface/");'><h3>Second </h3><p>Typeface<br />April  2012 </p></div>
 </div>
</center>
<script type="text/javascript">
/*<![CDATA[*/
// Hover Text (19-May-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


zxcHoverText={

 init:function(o){
  var reg=new RegExp('\\b'+o.ClassName+'\\b'),els=document.getElementsByTagName('*'),ary=[],img,ms=o.FadeDuration,io=o.ImageOpacity,z0=0;z1=0
  for (;z0<els.length;z0++){
   img=els[z0].parentNode.getElementsByTagName('IMG')[0];
   if(reg.test(els[z0].className)&&img){
    els[z0].style.position='absolute';
    els[z0].style.left='-3000px';
    els[z0].style.top='-3000px';
    this['h'+z0]={
     img:img,
     inow:100,
     txt:els[z0],
     tnow:0
    }
    this.addevt(img,'mouseover','over',this['h'+z0]);
    this.addevt(img,'mouseout','out',this['h'+z0]);
    this.addevt(els[z0],'mouseover','over',this['h'+z0]);
    this.addevt(els[z0],'mouseout','out',this['h'+z0]);
    ary.push(els[z0]);
   }
  }
  for (;z1<ary.length;z1++){
    document.body.appendChild(ary[z1]);
  }
  this.ms=typeof(ms)=='number'?ms:1000;
  this.io=typeof(io)=='number'?io:50;
 },

 over:function(o){
  var p=this.pos(o.img),ms=this.ms*Math.abs((100-o.tnow)/100);
  o.txt.style.left=p[0]+(o.img.width-o.txt.offsetWidth)/2+'px';
  o.txt.style.top=p[1]+(o.img.height-o.txt.offsetHeight)/2+'px';
  clearTimeout(o.to);
  clearTimeout(o.tnowdly);
  clearTimeout(o.inowdly);
  this.animate(o,o.txt,o.tnow,100,new Date(),ms,'tnow');
  this.animate(o,o.img,o.inow,this.io,new Date(),ms,'inow');
 },

 out:function(o){
  var oop=this,ms=oop.ms*Math.abs((o.tnow)/100);
  o.to=setTimeout(function(){ oop.animate(o,o.txt,o.tnow,0,new Date(),ms,'tnow'); oop.animate(o,o.img,o.inow,100,new Date(),ms,'inow'); },100);
 },

 animate:function(obj,ob,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ob.style.filter='alpha(opacity='+now+')';
   ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
   obj[to]=now;
  }
  if (ms<mS){
   obj[to+'dly']=setTimeout(function(){ oop.animate(obj,ob,f,t,srt,mS,to); },10);
  }
  else if (t==0){
    ob.style.left='-3000px';
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p,p1,p2){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
  }
 }

}

zxcHoverText.init({
 ClassName:'info',
 FadeDuration:1000,
 ImageOpacity:60
});
/*]]>*/
</script>
</body>

</html>

**mickkmg** · 05-20-2012, 08:29 AM

Hi Vic

thanks for the rapid response! i have tried this, it works on jsfiddle and dw, however when i pasted it to my CMS, the hover function doesn't work. check here http://www.suryaprasetya.com/portfolio/test-page/

what am i doing wrong?

**vwphillips** · 05-20-2012, 01:57 PM

your modified page has additional headers & </body> & </html>

remove these and my script

and put this modified code in your header(I have modified the code as something was interfering with my regExp)

Code:

// Hover Text (19-May-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


zxcHoverText={

 init:function(o){
  var reg=new RegExp('\b'+o.ClassName+'\b'),els=document.getElementsByTagName('*'),ary=[],img,ms=o.FadeDuration,io=o.ImageOpacity,z0=0;z1=0
  for (;z0<els.length;z0++){
   img=els[z0].parentNode.getElementsByTagName('IMG')[0];
   if(els[z0].className&&els[z0].className.match(o.ClassName)&&img){
    els[z0].style.position='absolute';
    els[z0].style.left='-3000px';
    els[z0].style.top='-3000px';
    this['h'+z0]={
     img:img,
     inow:100,
     txt:els[z0],
     tnow:0
    }
    this.addevt(img,'mouseover','over',this['h'+z0]);
    this.addevt(img,'mouseout','out',this['h'+z0]);
    this.addevt(els[z0],'mouseover','over',this['h'+z0]);
    this.addevt(els[z0],'mouseout','out',this['h'+z0]);
    ary.push(els[z0]);
   }
  }
  for (;z1<ary.length;z1++){
    document.body.appendChild(ary[z1]);
  }
  this.ms=typeof(ms)=='number'?ms:1000;
  this.io=typeof(io)=='number'?io:50;
 },

 over:function(o){
  var p=this.pos(o.img),ms=this.ms*Math.abs((100-o.tnow)/100);
  o.txt.style.left=p[0]+(o.img.width-o.txt.offsetWidth)/2+'px';
  o.txt.style.top=p[1]+(o.img.height-o.txt.offsetHeight)/2+'px';
  clearTimeout(o.to);
  clearTimeout(o.tnowdly);
  clearTimeout(o.inowdly);
  this.animate(o,o.txt,o.tnow,100,new Date(),ms,'tnow');
  this.animate(o,o.img,o.inow,this.io,new Date(),ms,'inow');
 },

 out:function(o){
  var oop=this,ms=oop.ms*Math.abs((o.tnow)/100);
  o.to=setTimeout(function(){ oop.animate(o,o.txt,o.tnow,0,new Date(),ms,'tnow'); oop.animate(o,o.img,o.inow,100,new Date(),ms,'inow'); },100);
 },

 animate:function(obj,ob,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ob.style.filter='alpha(opacity='+now+')';
   ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
   obj[to]=now;
  }
  if (ms<mS){
   obj[to+'dly']=setTimeout(function(){ oop.animate(obj,ob,f,t,srt,mS,to); },10);
  }
  else if (t==0){
    ob.style.left='-3000px';
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p,p1,p2){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
  }
 }

}


function Init(){

zxcHoverText.init({
 ClassName:'info',
 FadeDuration:1000,
 ImageOpacity:60
});

}

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

Thread: Text Hover on Image?

Thread Tools

Search Thread

Text Hover on Image?

Bookmarks

Bookmarks

Posting Permissions