Web Analytics Made Easy - StatCounter Please help - urgent -Fading rotating images - CodingForum

Announcement

Collapse
No announcement yet.

Please help - urgent -Fading rotating images

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Please help - urgent -Fading rotating images

    Hi
    I usually work in html, but I am trying to put up rotating images that fade. I found some Javascript coding but it isn't working correctly. I only see the first image and it fades but nothing happens after that. This is the code I have:
    Code:
    <script language="JavaScript">
 
<!-- Begin
 
var slideShowSpeed = 5000;
 
var crossFadeDuration = 3;
 
var Pic = new Array();
 
 
Pic[0] = 'image1.jpg'
Pic[1] = 'image2.jpg'
Pic[2] = 'image3.jpg'
Pic[3] = 'image1.jpg'
Pic[4] = 'image2.jpg'
 
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>
 
<body link="Red" vlink="Red" alink="Red" leftmargin=0 topmargin=0 bgcolor="Black"onLoad="runSlideShow()">
 
<img src="images/image1.jpg" alt="" name="SlideShow" id="SlideShow" width="300" height="200" border="0" align="left">
    Can some assist me twith this?

    Thanks, Lisa
    Last edited by LisaJean; Aug 23, 2011, 08:00 AM.
    Tags: None
  • #2
    Thanks for sending that through - is there nothing simpler. As I mentioned I normally deal in html and when I copy the coding you recommend - it's a bit over my head...

    Comment

    • #3
      The code as posted does basically work, even though it is a very old script, with a lot of old or deprecated stuff in it. Nevertheless, the images do swap OK in all browsers. They will cross-fade in IE, but not in other browsers, as blendTrans is an MSIE proprietary filter (which has long been deprecated by Microsoft, in favour of its other Basic or Alpha filters).

      If you need cross-fading to happen in all browsers, you would need to implement the CSS3 opacity property, which works in modern browsers (which includes IE9). But for IE versions before 9 which do not support CSS3 opacity, it is usual to implement the alpha filter as a substitute. If you want to see how that's done, just Google for a tutorial on the subject. Here's a couple:
      http://www.cryer.co.uk/resources/jav...2slideshow.htm
      http://www.switchonthecode.com/tutor...fade-animation

      But if your images are not even swapping OK with the code you posted, try checking your image filenames and path.

      Comment

      Previous template Next
      Working...
      X