www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 35

Thread: Rotating Images

  1. #1
    Join Date
    Mar 2003
    Posts
    8

    Unhappy Rotating Images

    Hi! I'm new here and still pretty much a novice in the web design field. In fact, the extent of my knowledge is basically no more than html.

    However, I'm trying to create a revolving image at the top of a personal website I'm creating and could use some help. Basically, I have three pictures. I want someone to come to my website and show one picture at the top. After about 2 seconds, I want the picture to change to the second and after another 2 secs to change to the third.

    Could anyone help me out with this? I would greatly appreciate it!

  2. #2
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    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>

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  3. #3
    Join Date
    Mar 2003
    Posts
    8
    Thank you so much! I'm just headed out the door and will give it a try when I get to work. Thanks again!

  4. #4
    Join Date
    Mar 2003
    Posts
    8
    OK, score one for my novice ways.

    Where would I plug in my pictures? The way I did it I keep getting a runtime error.

    Can you bold each place I need to do this? Also, does it make a difference if the pictures are of different sizes?

  5. #5
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    <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>

    Make sure that paths are correct. And, the images can be any size.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  6. #6
    Join Date
    Mar 2003
    Posts
    8
    This is what I have:

    <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("http://devyne.org/Images/E&B.jpg", seconds * 1000);
    }
    function imgTwo()
    {
    document.myimg.src = 'http://devyne.org/Images/E&B.jpg';
    setTimeout("http://devyne.org/Images/family2.gif", seconds * 1000);
    }
    function imgThree()
    {
    document.myimg.src = 'http://devyne.org/Images/family2.gif ';
    setTimeout("http://devyne.org/Images/babyboy1.gif", seconds * 1000);
    }
    </script>

    </head>

    <body onload="http://devyne.org/Images/babyboy1.gif ();">
    <img src="http://devyne.org/Images/babyboy1.gif" name="myimg">
    </body>
    </html>

    However, I keep being told that line 33 has an expression expecting

  7. #7
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    You body tag should be this:

    <body onload="imgOne();">

    That tells the body to run the first function, imgOne()...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  8. #8
    Join Date
    Mar 2003
    Posts
    8
    Oops, looks like we posted over each other.

    I've put in this:

    <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 = 'http://devyne.org/Images/E&B.jpg';
    setTimeout("imgThree()", seconds * 1000);
    }
    function imgThree()
    {
    document.myimg.src = ‘http://devyne.org/family.gif’;
    setTimeout("imgOne()", seconds * 1000);
    }
    </script>

    </head>

    <body onload="imgOne();">
    <img src="http://devyne.org/Images/babyboy1.gif" name="myimg">
    </body>

    And now I'm getting a runtime error "expression expected" on line 24, which is highlighted in red.

    On a side note, you can laugh at or criticize the pictures at will. They are just test pictures for now as the ones I want to use are not uploaded to the computer yet.
    Last edited by ferretfan7; 03-12-2003 at 07:47 PM.

  9. #9
    Join Date
    Feb 2003
    Posts
    27
    Hi Both

    Sorry to disturb the thread. Pyro's script is exactly how you should do it, but if you are using Dreamweaver here's a link to a website that gives you a dreamweaver extension that does exactly what you want. It allows random images on refresh, sequentially (as you need), daily etc.. It's quite solid and the actual script can be taken and adapted. It's just a bit easiar with the extension..


    http://www.kaosweaver.com/

    you need to download the advanced Random images v4.2.0
    (the free extension)
    I know I should be put in a pit from the nether regions of hell for suggesting 'a cheat' method...

    Cheers

    Cham

  10. #10
    Join Date
    Mar 2003
    Posts
    8
    Lol! No, thank you very much. Actually I am using Dreamweaver but I'm not used to MX. This stupid runtime keeps popping up each time I try to preview it or debug it. I'll give that link a try.

  11. #11
    Join Date
    Mar 2003
    Posts
    8
    Awesome!!!

    It worked! Thank you so much. Out of curiosity, what is the difference between the code that pyro provided and the code from DW besides all the kaosweaver mumbo jumbo? Is DW just messier?

    <body onLoad="rndSlideShow(1000,0)"><script language="JavaScript">
    // Advanced Random Images Start
    // Copyright 2001-2002 All rights reserved, by Paul Davis - www.kaosweaver.com
    var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
    // KW_rs[1000]
    KW_ARI[KW_ARI.length]='http://devyne.org/family.gif';
    KW_ARI[KW_ARI.length]='http://devyne.org/Images/babyboy1.gif';
    KW_ARI[KW_ARI.length]='http://devyne.org/Images/ayinaavatar.gif';
    j=parseInt(Math.random()*KW_ARI.length);
    j=(isNaN(j))?0:j;
    document.write("<img name='randomSlideShow' src='"+KW_ARI[j]+"'>");
    function rndSlideShow(t,l) { // Random Slideshow by Kaosweaver
    x=document.randomSlideShow; j=l; while (l==j) {
    j=parseInt(Math.random()*KW_ARI.length); j=(isNaN(j))?0:j; }
    x.src=KW_ARI[j]; setTimeout("rndSlideShow("+t+","+j+")",t);
    }

    // Advanced Random Images End
    </script>
    <!-- KW ARI Image -->
    Last edited by ferretfan7; 03-12-2003 at 08:02 PM.

  12. #12
    Join Date
    Feb 2003
    Posts
    27
    Hi

    To save time heres the script for a sequential picture display, insert it in position:

    body onLoad="seqSlideShow(45000,0)">
    <script language="JavaScript">
    // Advanced Random Images Start
    // Copyright 2001-2002 All rights reserved, by Paul Davis - www.kaosweaver.com
    var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
    // KW_ss[45000]
    KW_ARI[KW_ARI.length]='/Anakin2.jpg';
    KW_ARI[KW_ARI.length]='/atom.jpg';
    j=parseInt(Math.random()*KW_ARI.length);
    j=(isNaN(j))?0:j;
    document.write("<img name='seqSlideShow' src='"+KW_ARI[j]+"'>");
    function seqSlideShow(t,l) { // Sequential Slideshow by Kaosweaver
    x=document.seqSlideShow; j=l; j++; if (j==KW_ARI.length) j=0;
    x.src=KW_ARI[j]; setTimeout("seqSlideShow("+t+","+j+")",t);
    }

    // Advanced Random Images End
    </script>
    <!-- KW ARI Image -->
    </body>

    to add the images replace anakin2.jpg and atom.jpg. To add more images just underneath the atom jpg line add

    KW_ARI[KW_ARI.length]='/YOUR PIC.GIF';

    and keep doing this to increase the number of pics you want to be displayed. This will go back to the start picture though. To speed or slow down the show just decrease or increase all instances of 45000.

    Hope this helps

    Cheers

    Cham

  13. #13
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    This code works:

    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 = 'http://devyne.org/Images/E&B.jpg'; 
    setTimeout("imgThree()", seconds * 1000); 
    } 
    function imgThree() 
    { 
    document.myimg.src = 'http://devyne.org/family.gif'; 
    setTimeout("imgOne()", seconds * 1000); 
    } 
    </script> 
    
    </head> 
    
    <body onload="imgOne();"> 
    <img src="http://devyne.org/Images/babyboy1.gif" name="myimg"> 
    </body> 
    </head>
    The problem was in the line you had hightlighted above, you used the wrong kind of '. you needed straign ones, yours curled toward the text...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  14. #14
    Join Date
    Feb 2003
    Posts
    27
    Hi

    missed a < at the start of the script...

    Cheers

    Cham

  15. #15
    Join Date
    Feb 2003
    Posts
    27
    Hi

    I think pyro's script is neater, the DM script is a bit messy, but it does works across all browsers.

    Cheers

    DCH

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 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