www.webdeveloper.com
Page 3 of 3 FirstFirst 123
Results 31 to 35 of 35

Thread: Rotating Images

  1. #31
    Join Date
    Jun 2011
    Posts
    1
    Thanks this worked i moded it to allow me to do 2 separate rotating images placed in ap-div boxes on either side of the header.

    <script language="javascript" type="text/javascript">

    img2 = new Image()


    seconds = "2";
    //-----new load function-----

    function start()
    {
    imgOne(),imgOne2();
    }
    //-----end load function----

    // Image Set One

    function imgOne()
    {
    setTimeout("imgTwo()", seconds * 1000);
    }
    function imgTwo()
    {
    document.myimg.src = './images/header/2.jpg';
    setTimeout("imgThree()", seconds * 1000);
    }
    function imgThree()
    {
    document.myimg.src = './images/header/3.jpg';
    setTimeout("imgFour()", seconds * 1000);
    }
    function imgFour()
    {
    document.myimg.src = './images/header/4.jpg';
    setTimeout("imgOne()", seconds * 1000);
    }


    // second set of images
    // You can rename the functions if you would like to be more creative just
    // just make sure you change the function call in start()

    function imgOne2()
    {
    setTimeout("imgTwo2()", seconds * 1000);
    }
    function imgTwo2()
    {
    document.myimg2.src = './images/header/2.jpg';
    setTimeout("imgThree2()", seconds * 1000);
    }
    function imgThree2()
    {
    document.myimg2.src = './images/header/3.jpg';
    setTimeout("imgFour2()", seconds * 1000);
    }
    function imgFour2()
    {
    document.myimg2.src = './images/header/4.jpg';
    setTimeout("imgOne2()", seconds * 1000);
    }
    </script>


    </head>

    <body onload="start();">
    <!-- both img src codes placed into ap div boxes for proper placement-->
    <!--image one-->

    <img src="./images/header/1.jpg" name="myimg" height="150">
    <!--Image Two-->
    <img src="./images/header/1.jpg" name="myimg2" height="150">

  2. #32
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by pyro View Post
    Try this code:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="javascript" type="text/javascript">
    
    img2 = new Image()
    
    
    seconds = "2";
    
    function imgOne()
    {
    	setTimeout("imgTwo()", seconds * 1000);
    }
    function imgTwo()
    {
    	document.myimg.src = 'two.gif';
    	setTimeout("imgThree()", seconds * 1000);
    }
    function imgThree()
    {
    	document.myimg.src = 'three.gif';
    	setTimeout("imgOne()", seconds * 1000);
    }
    </script>
    
    </head>
    
    <body onload="imgOne();">
    <img src="one.gif" name="myimg">
    </body>
    </html>
    How would you throw that into a constant loop? to where. it gose from img1 - img2 - img3 than back to img1 cause the way it is now it will loop every img besides the FIRST img.

  3. #33
    Join Date
    Feb 2012
    Posts
    12
    Disreguard that last post I figured it out after the imgone section i didnt have the code: Document.myimg.src - 'Photo.jpg'; (End Code) so ya... thanks for the code though! really helped

  4. #34
    Join Date
    Feb 2012
    Posts
    2
    Nice, I have tried pyros code and worked like a charm!

    Cheers

  5. #35
    Join Date
    Jun 2012
    Posts
    5
    Hello,

    Mine kinda works. It displays the first image for just a flash, then starts alternating between the second and third image only. Any idea what would cause this?

Thread Information

Users Browsing this Thread

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

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