I have a site that I'm trying to build that will have a slideshow of pictures scrolling on the side. I found some javascript code at codelifter.com (http://www.codelifter.com/main/javas...lideshow2.html).

The pictures in the slideshow are all PNG's using alpha transparency. But, since IE doesn't seem to like PNG's with alpha transparency, I grabbed another piece of javascript from http://homepage.ntlworld.com/bobosola/pnghowto.htm.

Individually, the scripts work fine. That is, without the PNG transparency fix, the slideshow works fine and without the slideshow, the PNG transparency works great. However, when I try to combine the two, I get a javascript error in the slideshow function telling me that I have an invalid null value. This error occurs on the "document.images.SlideShow.style.filter" statement in the HTML below.

I cut the HTML down to the bare bones to make it easier to look at. If anyone could look at the scripts and give me a hand in combining the two functions, I would really appreciate it.

Following is the HTML with the inline slideshow function:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>slideshow test </title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<!--[if lt IE 7]>
<script defer type="text/javascript" src="javascript/correctpng.js" >
</script>
<![endif]-->

<script>
// (C) 2000 [url]www.CodeLifter.com[/url]
// [url]http://www.codelifter.com[/url]
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/mega_main_image_test1.png'
Pic[1] = 'images/mega_main_image_test2.png'

// =======================================
// 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);
}
</script>

</head>
	<body onload=runSlideShow()>
		<div id="mainimage">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td id="VU" height=386 width=263>
						<img src="images/mega_main_image_test1.png" name='SlideShow' width=263 height=386></td>
				</tr>
			</table>
		</div>  
	</body>
</html>
Following is the javascript to correct the PNG transparency for IE:

Code:
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);