Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Automatic Image Toggle Inside Table (how to?)

    I am decent web designer with limited scripting skills. Some Perl, but basically a Javascript novice, but I do have an understanding of its uses.

    I need to have an image inside a html table automatically toggle with another when the page loads without any user input.

    I downloaded the following script and modified it to run my images. It works alone on a page, but I can't get it to work with the images inside a table.

    This is probably pretty easy for anyone with moderate scripting skills, so anyone with any input would be greatly appreciated. Thank you.

    Also, if there is an easier way to do this, please let me know.


    Code:
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (02-11-2005) http://www.vicsjavascripts.org.uk/
    
    var zxcFCnt=0;
    
    function ToggleImage(objid,img,time){
     if (typeof(objid)=='string'){ objid=document.getElementById(objid); }
     if (!objid.toggle){
      objid.toggle=new zxcAddFunctions(objid);
      objid.toggle.one=objid.src;
      objid.toggle.two=img;
      objid.toggle.delay=time;
      objid.toggle.auto();
      return;
     }
     if (objid.toggle.run){
      clearTimeout(objid.toggle.to);
      objid.toggle.run=false;
     }
     else {
      objid.toggle.run=true;
      objid.toggle.auto();
     }
    }
    
    function zxcAddFunctions(zxc){
     this.mobj=zxc;
     this.ref='auto'+zxcFCnt;
     window[this.ref]=this;
     this.run=true;
     this.to=null;
    
     this.setTimeOut= function(zxcf,zxcd){
                       this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
                      }
    
     this.auto=function(){
               if(this.run){
                 this.setTimeOut('auto();',this.delay);
                 if (this.mobj.src==this.one){
                  this.mobj.src=this.two;
                 }
                 else {
                  this.mobj.src=this.one;
                 }
                }
               }
    
     zxcFCnt++;
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body onload="ToggleImage('Img1','http://www.ezsleeptravel.com/images/Animation1.jpg',4000);" >
    
    <img id="Img1" src="http://www.ezsleeptravel.com/images/Animation2.jpg" alt="Contact Us" width="588" height="422" border="0" id="contact"
    onclick="ToggleImage(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',2000);"
    />
    
    <br>
    
    
    
    </body>
    
    </html>
    Last edited by vinyl-junkie; 03-17-2013 at 07:45 PM. Reason: added code tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Why don't you just use the image you want by coding the table to have that image instead of the image you already coded? Or is there something your not saying?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    the table should not be an issue

    please post a link to your page
    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/

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vwphillips,

    Here is the link to the working test page that shows the images toggling that I mentioned:

    www.ezsleeptravel.com/test2.html

    Below is the link to the page that I would like the image toggling to be on:

    www.ezsleeptravel.com

    As mentioned before I can't get it to work inside the table of the desired page.

    I release this may be a trivial coding issue about having all the code and scripts in the write place, but I don't know the details of that. Thank you in advance.

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sunfighter,


    Here is the link to the working test page that shows the images toggling so you can see what I am looking for:

    www.ezsleeptravel.com/test2.html

    Below is the link to the page that I would like the image toggling to be on:

    www.ezsleeptravel.com

    As mentioned before I can't get it to work inside the table of the desired page.

    I realize this may be a trivial coding issue about having all the code and scripts in the right place, but I don't know the details of that. Thank you in advance.


  •  

    Posting Permissions

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