Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Slide Show Loop

  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide Show Loop

    Hello,

    I have a snippet of code that cycles though 3 images. I want to be able to attached an html formatted description to each image that will be displayed depending on the image. Can anyone help me with this.

    Code:
    <html>
        <head>
            <script type="text/javascript">
            <!--
            // preload images
            var image1=new Image()
            image1.src="Transportation_1.png"
            var image2=new Image()
            image2.src="Transportation_2.png"
            var image3=new Image()
            image3.src="Transportation_3.png"
            // -->
            </script>
        </head>
        <body>
    		<center>
    			<h2><strong><font color="#534D02">Featured Growth Chart</font></strong></h2>
    		</center>
            <a href="javascript:slidelink()">
    		<center>
    			<img src="Transportation-1" name="slide" width="100" height="400" />
    			</a>
    		</center>
    		<center>
    			<h3>Stacked Owls (Sherbet) Canvas Growth Chart</h3>
    			<h3><font color="#BE0101">$40.00</font></h3>
    		</center>
            <script>
                <!--
                var step=1
                var whichimage=1
    			
                function slideit(){
                    if (!document.images)
                    return
                    document.images.slide.src=eval("image"+step+".src")
                    whichimage=step
                    if (step<3)
                    step++
                    else
                    step=1
                    setTimeout("slideit()",1800)
                }
                slideit()
    			
                function slidelink(){
                    if (whichimage==1)
                    window.location="link1.htm"
                    else if (whichimage==2)
                    window.location="link2.htm"
                    else if (whichimage==3)
                    window.location="link3.htm"
                }
                //-->
            </script>
        </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    It's old code, no one makes htm pages, uses eval in their code, or uses center tags. You might want to look for newer code before you spend too much time on this.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <html>
        <head>
            <script type="text/javascript">
            <!--
            // preload images
            var image1=new Image()
            image1.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
            var image2=new Image()
            image2.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"
            var image3=new Image()
            image3.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"
    
            var ImageArray=[
             ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Egypt 5','link1.htm'],
             ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Egypt 6','link2.htm'],
             ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Egypt 7','link3.htm']
            ];
    
           // -->
            </script>
        </head>
        <body>
    		<center>
    			<h2><strong><font color="#534D02">Featured Growth Chart</font></strong></h2>
    		</center>
            <a href="javascript:slidelink()">
    		<center>
    			<img src="Transportation-1" id="slide" width="100" height="400" />
    			</a>
             <div id="text" ></div>
    		</center>
    		<center>
    			<h3>Stacked Owls (Sherbet) Canvas Growth Chart</h3>
    			<h3><font color="#BE0101">$40.00</font></h3>
    		</center>
            <script>
                <!--
                var step=0;
                var whichimage=0;
    
                function slideit(){
                    document.getElementById('slide').src=ImageArray[step][0];
                    document.getElementById('text').innerHTML=ImageArray[step][1]||'';
                    whichimage=step;
                    step=++step%ImageArray.length;
                    setTimeout("slideit()",1800)
                }
                slideit()
    
                function slidelink(){
                    if (ImageArray[whichimage][2]){
                     window.location=ImageArray[whichimage][2];
                    }
                }
                //-->
            </script>
        </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much Vic, you have been a great help.


  •  

    Posting Permissions

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