PDA

View Full Version : Text Hover on Image?



mickkmg
05-19-2012, 03:45 PM
Hi guys

i'm trying to get a function happening exactly like this [URL="#[/URL]

however for the life of me i couldn't figure out how to get the text box to appear exactly on top of the image, as per image size! it frustrates me, the closest i've come is by using 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
<!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)


// 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);
}