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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    67
    Thanks
    20
    Thanked 1 Time in 1 Post

    Slideshow Issues

    I have this code for my webpage
    Code:
    <head>
    
    
    <style type="text/css">
    
     #ss_image{
    -ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
     filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
      }
    </style>
     </style>
    </head>
    
    <body onload="onload()">
    <script type="text/javascript">
    function onload(){
    	for(;;) {
    		setTimeout(slideshow(),3000);
    	}
    }
     function slideshow(){
      var image=document.getElementById("ss_image")
     if (image.filters && image.filters.length>0) //if filters[] collection is defined (only in IE)
       image.filters[0].apply()
      image.src=(image.src.indexOf("one.png")!=-1)? " two.png" : "one.png" //alternate between two images to change to
      if (image.filters && image.filters.length>0)
      image.filters[0].play(2) //2 seconds transition
     }
     
    </script>
    
    <img id="ss_image" src="one.png" height="296" width="401" /><br />
    </body>
    </html>
    My problems are:
    The slideshow stops after one chage Why is this?

    Also could someone tell me who i could add more images, and how to link each one to a page.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    Some moderate changes required to meet your request(s).
    Code:
    <style type="text/css">
    
     #ss_image{
    -ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
     filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
      }
    </style>
     </style>
    </head>
    
    <body onload="onload()">
    <script type="text/javascript">
    function onload(){ slideshow(); } // setTimeout('slideshow()',3000); }
    
    var imgPtr = 0;
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
        ['11.jpg','http://www.webdeveloper.com'],
        ['12.jpg','http://www.codingforums.com"'],
        ['13.jpg','http://dreamincode.net'],
        ['14.jpg','http://www.mredkj.com/tutorials/htmljs.html'],
        ['15.jpg','http://scripterlative.com/?smartstars']
    ];
    
    function slideshow(){
      var image=document.getElementById("ss_image")
      if (image.filters && image.filters.length>0) //if filters[] collection is defined (only in IE)
        image.filters[0].apply();
    
      image.src = baseURL + imgList[imgPtr][0];
      document.getElementById('alink').href = imgList[imgPtr][1];
      imgPtr = (imgPtr+1) % imgList.length;
    
    /*  remove following
      image.src=(image.src.indexOf("http://www.nova.edu/hpd/otm/pics/4fun/11.jpg")!=-1)
               ? "http://www.nova.edu/hpd/otm/pics/4fun/21.jpg" 
               : "http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" //alternate between two images to change to
    */
      if (image.filters && image.filters.length>0)
      image.filters[0].play(2) //2 seconds transition
      setTimeout("slideshow()",3000);
    }
     
    </script>
    <a href="" id="alink" style="text-decoration:none">
    <img id="ss_image" src="" height="296" width="401" />
    </a>
    <br />
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    UltimateCoder (02-25-2012)


  •  

    Posting Permissions

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