IE AlphaImageLoader blacks out page

[freetruman]

I'm working on a DHTML program that is an interactive map (similar in architecture to Google maps, though I haven't seen their API or code). I've been working on a new version and somewhere along the way I've run into an error which is frustrating and odd and that I have no idea how to solve.

So I have icons on this map, and when you rollover one, it is supposed to change to a "halo" which indicates that the icon is "active", i.e. it shows you which icon you are hovering over. The way I implement this is to have an image which is free on the page; when an icon is active, the halo image's source is changed to the appropriate URL, and it is made visible. This works fine on Firefox, but of course for IE I have to do the AlphaImageLoader filter. But when I do this, it turns the image into an image that covers the entire page and whose color is a dark black, essentially blanking out the page except for the images which are higher than this on the page.

Here's my code. I have images abstracted into objects called RegImage:

function RegImage_pngSrc(val)
{
if (!val) return;
if (ie55up)
{
this.imag.style.width = this.arean.right - this.arean.left;
this.imag.style.height = this.arean.bottom - this.arean.top;

var filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader";
filter += "(src='" + val + "', sizingMethod='scale');";
this.imag.style.filter = filter;
this.imag.src = 'images/clear.gif';
}
else this.src(val);
}

Here's a brief API for this object structure to make this code more clear:

// an object which stores an HTML image object and information about its size and location
RegImage
// the field which stores the HTML imag object (this is assigned in the RegImage constructor)
RegImage.imag
// An object which stores the top, right, bottom, and left values for this image, so that they don't have to be recalled from imag.style and parsed as ints, which can be unreliable
RegImage.arean
// method to change the object's source to a non-png image
RegImage.src(newsource)
// ie55up
A boolean initialized when the page loads that indicates whether this browser is IE5.5+ (which requires the Alpha Image Loader)


I've been working on debugging this for more than a day, with very little luck. The easy solutions to this problem, I've already tried:
-I know that the URL is being entered correctly, especially because this is working on Firefox
-I set the image width, height and the style width and height properties before applying the filter

And some other oddities about this problem:
-I have PNGs a number of other places on the page, all of which work fine in IE using this implementation
-The image only blanks out the page when its source is first changed. So, when I move over a different icon on the page, something in this code causes halo to expand and black out the page. When I move off the icon, it is made invisible. When I move back onto the *same* icon, everything works as it should. So something in the act of changing the source is doing this.


Sorry if this is too much detail, but there's even a lot I tried that I've left here. Anyone have any ideas?

[gjenglish]

I was experiencing the same issue and I found that it was caused by toggling the visibility property of the image.

As soon as I removed the code where I am hidding/showing the image after the filter was set, the "blackness" disappeared.