Results 1 to 4 of 4

Thread: Change Img function Not working

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2009
    Location
    Los Angeles
    Posts
    1,335

    Change Img function Not working

    I am trying to implement this code to get my page to change a picture based on timer.

    I am just learning and do not fully understand the whole piece of code, so if any can point me in the right direction i would appreciate it


    HTML Code:
     <script type="text/javascript">
    
       <!--
    
    if (document.images) { // Preloaded images
    demo1 = new Image();
    demo1.src = "http://node_charts_production.s3.amazonaws.com/cc9dcdc0389a7ff2c8af40ff6007e51c.png";
    
    demo2 = new Image();
    demo2.src = "http://node_charts_production.s3.amazonaws.com/85b6d5036c50481eb6f020372d4765ec.png";
    
    
    }
    
    function timeimgs(numb) { // Reusable timer
    thetimer = setTimeout("imgturn('" +numb+ "')", 1000);
    }
    
    function imgturn(numb) { // Reusable image turner
    if (document.images) {
    
    if (numb == "2") { // This will loop the image
    document["demo"].src = eval("demo2.src");
    timeimgs('2');
    }
    
    else { document["demo"].src = eval("demo" + numb + ".src");
    
    timeimgs(numb = ++numb);
    }
    }
    }
    
    // -->
    </script>
    Here is the img I am trying to change

    HTML Code:
                    <img src="http://node_charts_production.s3.amazonaws.com/85b6d5036c50481eb6f020372d4765ec.png"name="demo" alt="Mortgage Rate Chart" />

  2. #2
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Change Img function Not working

    Hi there billboy,

    When you see "<!--", "if(document.images)" and the evil "eval" in a script, you may be pretty sure that it is outdated.

    Have a look at this slightly more modern version...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://node_charts_production.s3.amazonaws.com/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>swap image example</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #demo {
        display:block;
        margin:30px auto 0;
        box-shadow:#333 5px 5px 10px;
     }
    </style>
    
    <script type="text/javascript">
    
    /****** these values may be edited ******/
    
       var speed=4000; /* image change rate */
       var repeats=4;  /* number of changes */
    
    /****************************************/
    
       var count=0;
    
    
       var preloads=[];
    
    
    function preload(){
    
    for(var c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
    
     }
       preload('85b6d5036c50481eb6f020372d4765ec.png','cc9dcdc0389a7ff2c8af40ff6007e51c.png');
    
    function swapImage(){
    
       obj=document.getElementById('demo');
    
       obj.src=(obj.src==preloads[0].src)?preloads[1].src:preloads[0].src;
    
    if(count++==repeats-1) {
       alert("That's it.\n\nTime's up."); /* the alert can, of course, be removed */
       return;
      }
    
       setTimeout(function(){swapImage();},speed);
    
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){swapImage();},speed)},false):
       window.attachEvent('onload',function(){setTimeout(function(){swapImage();},speed)});
    
    </script>
    
    </head>
    <body>
    
    <div>
     <img id="demo" src="85b6d5036c50481eb6f020372d4765ec.png" alt="Mortgage Rate Chart">
    </div>
    
    </body>
    </html>
    


    ~ the original bald headed old fart ~

  3. #3
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Change Img function Not working

    When you see "<!--", "if(document.images)" and the evil "eval" in a script, you may be pretty sure that it is outdated.
    ...not necessarily? eval() has valid applications (this is not one of them), comment tags are unnecessary but still appear frequently, and document.images is not obsolete...

  4. #4
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Change Img function Not working

    Hi there SambaNeko,

    what you say is true.

    But when you see them collectively in a script, you may be pretty sure that it is outdated.


    ~ the original bald headed old fart ~

Posting Permissions

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



Click Here to Expand Forum to Full Width