SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to continuously replace images w/ JavaScript

    The website I am working on is washtawimbashoes.com
    It is for my brother, as a christmas present. He makes some pretty sweet duct tape shoes.

    I am trying to write some JavaScript that will allow me to take the image on the front page, display it for say 10 seconds, then swap it out with another image, display that one for 2 seconds and repeat that continuously.

    This is my first writing making a website and using JavaScript so I could use some help. Here was my first attempt:

    <script type="text/javascript">
    for (i=10;i<1000;i=i+1)
    {
    if (i%5==0)
    {
    document.write("<img class='aligncenter' src='pic.jpg'")
    }
    else if (i%7==0)
    {
    document.write("<img class='aligncenter' src='pic2.jpg'")
    }
    }
    </script>

    The hope here was that document.write would overwrite the current pic but instead, it just added it below. Is there a way to erase something that you just wrote or replace it?

    Any tips would be great.

    Thanks,

    Rich

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    once the page has loaded, document.write writes to a new document so you can't use that for what you want to do.

    you will need to use DOM methods to swap the images and setInterval() and/or setTimeout() for your timing functionality.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a fast way of doing what you want. It uses 4 images of the same size (205px x 100px) - nothing magic here, I just happened to have these available. They can be any size and image format. When the page loads it displays the first image which is loaded with the page. It also calls a timeout which waits 2 seconds and then calls the picture loader called nextPic().

    nextPic() increments the array pointer, checks to see if the array length has been exceeded and then sets the pointer accordingly. The script then uses the image reference in the array to build the new image tag and then writes it to the page as the innerHTML of the div "imgHolder".

    This is a quick and dirty way to do it because the image size is fixed and so the width and height attributes can remain the same for each image in the build string.

    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <script type="text/JavaScript">
    <!--
    var picCount=0; // global
    var picArray= ["img2.gif","img3.gif","img4.gif","img1.gif"] // images all same size (205px x 100px)
    //
    // gets next picture in array
    function nextPic()
    { // check if adding 1 exceeds number of pics in array
    picCount=(picCount+1<picArray.length)? picCount+1 : 0;
    // build the img to write to page using the new pic reference
    var build='<img border="0" src="'+picArray[picCount]+'" width="205" height="100">\n';
    document.getElementById("imgHolder").innerHTML=build;
    // repeat this after a pause of 2sec.
    setTimeout('nextPic()',2000)
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #imgHolder{ position:absolute; top:100px; left:100px; text-align:left; }
    -->
    </style>
    <title>Image Swap</title>
    </head>

    <body onload="setTimeout('nextPic()',2000)">

    <div id="imgHolder">
    <img border="0" src="img1.gif" width="205" height="100">
    </div>

    </body>

    </html>

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the responses. I'll try this later today!

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I got it working! However, it only displays in Chrome and Firefox but not in Internet Explorer. Anyone know why? washtawimbashoes.com

    Also, does it look good having the image changing back and forth or do you think it is obnoxious?

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this works in my IE8, FF3.6, Opera 10, Safari and Chrome.

    it displays the first image for 5 secs and the second image for 2 secs continually in a loop. you can alter the display times to suit.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
     
                var imgPaths = [
                    ['pic1.jpg',5000],
                    ['pic2.jpg',2000]];
                var imgO = new Array();
                var currImg = 0;
                var currDispTime = imgPaths[0][1];
     
                //preload the images
                for(i=0; i < imgPaths.length; i++) {
                    imgO[i] = new Image();
                    imgO[i].src = imgPaths[i][0];
                }
     
                function swapImg() {
                    currImg = (currImg == 0)? 1 : 0;
                    currDispTime = (currDispTime == imgPaths[0][1])? imgPaths[1][1] : imgPaths[0][1];
                    imgObj.src = imgO[currImg].src;
                    setTimeout('swapImg()',currDispTime);
                }
     
                window.onload=function() {
                    imgObj = document.getElementById("imgSwap");
                    imgObj.src = imgO[currImg].src;
                    swapImg();
                }
            </script>
     
        </head>
        <body>
     
            <div>
                <img id="imgSwap" src="" alt="" />
            </div>
     
        </body>
    </html>


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
  •