www.webdeveloper.com
Results 1 to 5 of 5

Thread: Image Replace

  1. #1
    Join Date
    Mar 2011
    Posts
    2

    Image Replace

    I'm not really a java person so here goes.

    I need to load a different image after, lets say 10 seconds.

    So image1.gif will be displayed when the page loads then after say 10 seconds image2.png will replace image1.gif.

    How would go about doing this.

    Thanks.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Simple enough in JavaSCRIPT, don't know about Java.

    Basically, as long as every element in the web document has a unique ID, you can manipulate or read just about anything for that element, including the source. And JavaScript has a "setTimeout" function that can do the "every 10 seconds" part.

    So, let's use the following arbitrary code as an example:
    HTML Code:
    <img id="img1" src="/images/image1.gif" />
    Inside the HEAD tags at the top, you can do something like:
    Code:
    function swapImage() {
      var thisImg = document.getElementById('img1');
      thisImg.src = "/images/image2.png";
      setTimeout("swapImage()",10000);
    }
    window.onload = swapImage;
    Now.. this will only change the source to image2.png, and will reset to image2.png every ten seconds. But you can create an array of image names and use those referencing the array index and setting a variable to increment by one with each iteration; stipulate that once the variable gets to the max length of the array, reset to zero.

    ^_^

  3. #3
    Join Date
    Mar 2011
    Posts
    2
    Thanks for this, however the browser (IE 8) returns an error:

    'null' is null or not an object

    Line: 3, Char: 3

    Code:
    function swapImage() {
      var thisImg = document.getElementById('img1');
      thisImg.src = "/images/image2.png";
      setTimeout("swapImage()",10000);
    }
    window.onload = swapImage;
    I assume its the line highlighted in red.

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    The image element is named 'img1'?

    I suppose it could be a timing issue; if the image isn't loaded at onload, this could account for the null issue.

    Also, just for giggles, give the image the same name as the id.

    ^_^
    Last edited by WolfShade; 03-01-2011 at 10:56 AM.

  5. #5
    Join Date
    Dec 2010
    Posts
    207
    This swaps after 5 seconds but can be changed. Just replace your own image names in the img tag and the function call:
    Code:
    <img src = 'original.jpg' id = 'myImage'>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function loadAfter( imgId, delay, newImage )
    {
     var holder = document.getElementById( imgId ),
         buffer = new Image();
         
     buffer.src = newImage;      
       
     holder.onload = function()
     {   
      var obj = this;  
      setTimeout( function(){ obj.src = newImage }, delay );  
     }
     
     holder.src = holder.src; 
    }
    
    
    loadAfter( 'myImage', 5000, 'replacement.jpg' );
    
    /*]]>*/
    </script>


    Q: I found this code...
    A: Then find its author.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles