View Full Version : Problem with javascript Slideshow and transparent PNG files

01-20-2006, 10:03 PM
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/javascript/slideshow2.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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<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" >

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// 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.src = preLoad[j].src
if (document.all){
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed);

<body onload=runSlideShow()>
<div id="mainimage">
<table border="0" cellpadding="0" cellspacing="0">
<td id="VU" height=386 width=263>
<img src="images/mega_main_image_test1.png" name='SlideShow' width=263 height=386></td>

Following is the javascript to correct the PNG transparency for IE:

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);

01-21-2006, 12:01 AM
You might also have functions and/or variables with the same name but this is a start.

Remove in red:

<body onload=runSlideShow()>

window.attachEvent("onload", correctPNG);

Add anywhere in one of the scripts:


You should read this:

01-21-2006, 12:44 AM
Thank you very much for your response. I tried your suggestions (deleting the separate "onloads" and adding back the concatenated one. Unfortunately, it still didn't work. When I added the new onload to the slideshow, it still gave me the null value error and when I added it to the PNG transparency javascript, it didn't run the slideshow.

Thanks for the link to the tutorial as well. I can't swear to it, but I'm fairly certain that this addresses only part of my problem. That's because my (novice) reading of the PNG transparency script looks like it scans the entire HTML for any PNG's and then applies a filter to them to correct the transparency problem. However, the slideshow javascript has required that I move all of the PNG file names to that script - so, I think that the transparency script can't "see" it....

It seems like if I could call the transparency script as I bump through the slideshow table I would be OK..... That said however, I'm too dumb to be able to figure out how to make that happen.

Does any of that sound like it could be my problem?


01-21-2006, 02:49 AM
It looks like the problem is that the correctPNG function converts all img tags whose src ends with "png" with a span element. The slideshow is trying to replace the src of an img tag that doesn't exist anymore.

The correctPNG function does copy the id of the original img to the new span but it doesn't copy the name. Even if it did you're now dealing with a span and setting the src on a span won't do anything at all.

IMHO it would be better to rewrite the whole thing or at least update it to use id and set the alpha filter instead of the src if the browser is IE.

01-21-2006, 05:39 AM
Thank you, Mongus. I'm afraid that your answer zipped right over my head. Are you saying that I can just modify the Slideshow script so that apply the alpha filter and forget about the other correctPNG script altoghether?

If so, that is kind of where I was attempting to go. Unfortunately, I couldn't figure out how to do that. I tried to make the DXImageTransform.... part of the string in the Pic[x] variables, but that didn't work.

It seemed to me that there should be some place in the Slideshow where I can just apply the filters to the Pic[x] PNG's in a loop and pass them on to the next loop. Unfortunately, the syntax for that was beyond my skills.

Would you have any ideas for this?


02-01-2007, 12:29 PM
I have the exact same problem: see http://forums.digitalpoint.com/showthread.php?t=232756

Did you find any working solution?