Mouse Over Text Hide/Show Image JS Needed

**softgeometry** · 09-29-2009, 08:29 PM

Hi,
I am looking for some javascript that would show a image in another div when text is moused over. The image would hide on mouse out. I have gotten this to work, but I am also looking to have a fade in / fade out effect.

I don't know how to write js so I haven't been able to alter the script I have. Any ideas or links to scripts would be great.

Thank you,

EB

**vwphillips** · 09-30-2009, 08:44 AM

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>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript">
// see http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
</script>

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

function Fade(id,ud,ms){
 document.getElementById(id).style.visibility='visible';
 if (!F){
  F=zxcBAnimator('opacity',id,ud?100:0,ud?0:100,ms||1000);
  F.Complete=function(){
     if (this.data[0]==0){
     this.obj.style.visibility='hidden';
    }
  }
 }
 else {
  zxcBAnimator('opacity',id,F.data[0],ud?0:100,ms||1000);
 }
}


/*]]>*/
</script>
</head>

<body>
<input type="button" name="" value="TEST" onmouseover="Fade('tst',false,1000);"  onmouseout="Fade('tst',true,1000);"/>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" style="visibility:hidden;"/>
</body>

</html>

**softgeometry** · 10-01-2009, 01:32 AM

Thank you.

This is very helpful.

The first link works. But then when I mouse over a second link, the thumbnail does not fade out, rather it vanishes and the next fades in. Does this mean the code only fades one at a time? Strangely, on occasion, it will work - one fades out as the other fades in.

http://ethanbuller.com/new/index2.html

**vwphillips** · 10-01-2009, 10:51 AM

when I mouse over a second link, the thumbnail does not fade out, rather it vanishes and the next fades in.

think this is the time between the mouse out and mouseover events

try removing the onmouseout="F.Fade();" on this variation

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[*/
#col3 {
 position:relative;
}

#col3 IMG {
 position:absolute; top:0; left:0; visibility:hidden;
}

/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript">
// see http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
</script>

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

function Fade(id,ms){
 var obj=document.getElementById(id);
 var imgs=obj.getElementsByTagName('IMG');
 this.imgs=[];
 for (var z0=0;z0<imgs.length;z0++){
  this.imgs[z0]=zxcBAnimator('opacity',imgs[z0],100,0,0);
  this.imgs[z0].Complete=function(){
     if (this.data[0]==0){
     this.obj.style.visibility='hidden';
    }
   }
 }
 this.lst=0;
 this.ms=ms||1000
}

Fade.prototype.Fade=function(nu){
 this.imgs[this.lst].update([this.imgs[this.lst].data[0],0],this.ms,[0,100]);
 if (this.imgs[nu]){
  this.lst=nu;
  this.imgs[this.lst].obj.style.visibility='visible';
  this.imgs[this.lst].update([this.imgs[this.lst].data[0],100],this.ms,[0,100]);
 }
}
/*]]>*/
</script>

</head>

<body>
<a  class="title" onmouseover="F.Fade(0);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('maclaren')">Maclaren</a>
<a class="title"  onmouseover="F.Fade(1);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('ronson')">Ronson</a>
<a class="title"  onmouseover="F.Fade(2);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('laser')">Laser</a>
<a class="title"  onmouseover="F.Fade(3);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('albert')">Albert Thurston</a>
<a class="title"  onmouseover="F.Fade(4);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('pepsi')">Pepsi</a>
<div id="col3">
 <img src="http://cargocollective.com/media/22060/porta15_mac1b_o.jpg" width="300" height="200" border="none" />
 <img src="http://cargocollective.com/media/22058/porta20_ron1_o.jpg" width="300" height="200" border="none"/>
 <img src="http://cargocollective.com/media/22059/porta10_lp1_o.jpg" width="300" height="200" border="none" />
 <img src="http://cargocollective.com/media/22059/porta11_lp2_o.jpg" width="300" height="200" border="none" />
 <img src="http://cargocollective.com/media/22056/porta7_pep1_o.jpg" width="300" height="200" border="none" />


</div>
<script  type="text/javascript">
/*<![CDATA[*/
var F=new Fade('col3',1000);

/*]]>*/
</script>
</body>

</html>

**softgeometry** · 10-02-2009, 12:39 AM

That works perfectly!

Thank you for you time, Vic.

**sharathramin001** · 10-03-2009, 08:57 AM

i have some problem to install the "image w/ description tooltip " in blogger

please help me

this script is available in dynamicdrive.com

and in that scripts i found this

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

i dont know which is tooltip div in this script

please help me
i know that my English is very poor
help me

i tried also but blogger says the scripts are not well formed

**vwphillips** · 10-03-2009, 10:24 AM

looking at the DD page for this script

Code:

<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>

</html>

however I do not know why it is required as the script uses document.write to write the Div to the page.

I do not think it is necessay

Thread: Mouse Over Text Hide/Show Image JS Needed

Thread Tools

Search Thread

Mouse Over Text Hide/Show Image JS Needed

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

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

Image w/ description tooltip

Bookmarks

Bookmarks

Posting Permissions