Internet Explorer Image Transition Effects

There are some image transition effects which are specific to Internet Explorer.

Consider an image on an html page, represented by the HTML code

<img id="imgImage" src="/image.gif">

The content of image tag may be changed using JavaScript:

document.getElementById("imgImage").src=arGallery[i];

Where arGallery[i]; is a gallery of images, through which we will be single stepping, perhaps with a time delay.

To add the transition effects

var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer") {< BR>  document.getElementById("imgImage").style.filter="blendTrans(duration=2)";< BR>  document.getElementById("imgImage").style.filter="blendTrans(duration=crossFadeDuration)";
  document.getElementById("imgImage").filters.blendTrans.Apply();
  document.getElementById("imgImage").filters.blendTrans.Play();
}

Now when we make the image change the two images will be seen to blend from one to the other.

var i = 0
function NextPhoto() {
  i++;
  if (i > arGallery.length) {
    i = 0;
  }
  document.getElementById("imgImage").src=arGallery[i];
}
function SlideShow() {
  i = 0;
  doShow();
}
function doShow() {
  var browserName=navigator.appName;
  if (browserName=="Microsoft Internet Explorer") {< BR>    document.getElementById("imgImage").style.filter="blendTrans(duration=2)";< BR>    document.getElementById("imgImage").style.filter="blendTrans(duration=crossFadeDuration)";
    document.getElementById("imgImage").filters.blendTrans.Apply();
    document.getElementById("imgImage").filters.blendTrans.Play();
  }
  NextPhoto();
  setTimeout("doShow()",5000);
}

NAT March 2006