Results 1 to 7 of 7

Thread: Mouse Over Text Hide/Show Image JS Needed

  1. #1
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Mouse Over Text Hide/Show Image JS Needed

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,813
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    softgeometry (10-02-2009)

  4. #3
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,813
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    softgeometry (10-02-2009)

  7. #5
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That works perfectly!

    Thank you for you time, Vic.

  8. #6
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image w/ description tooltip

    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
    Last edited by sharathramin001; 10-03-2009 at 10:03 AM.

  9. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,813
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •