Tech Musings

Sunday, August 12, 2007

PNG transparency problems in Internet Explorer

UPDATE 1/11/07! I recently switched out code produced by Dreamweaver's rollover behavior to the rollover code Bob Olsa made available in the source code on this page: http://homepage.ntlworld.com/bobosola/png_mouseover.htm


I'm actually quite proud of myself! I managed to fix a problem that's been bugging me for quite some time. Due to a quirk in the way Internet Explorer 5.5 and 6 on Windows handles PNG alpha transparency (or, more accurately stated, DOESN'T handle it), my navigation buttons on my photography details page were not displaying properly in IE after I applied a javascript rollover effect using a standard Dreamweaver swap image behavior. My swapped png images which include transparent elements did not work and showed as all gray (grey) in the IE 6 browser environment.

After some research I discovered a nice javascript-based fix for IE's PNG transparency problem using Bob Osola's alphaimageloader script, but the script requires that height and width attributes of transparent PNG images be clearly defined on the page or the script won't fix the png transparency problem. Dreamweaver's canned javascript for rollover buttons DOES NOT define the width and height of the target swapped image, so the alpatransparency PNG fix was not working with my transparent buttons. And, to top it off, the generated script from the DW behavior was so incredibly complex that I had no idea where to add these additional height and width attributes.

I posted my problem in the webdeveloper forums asking for guidance. A helpful gent told me where the width and height should be inserted in the bloated Dreamweaver code, and after tinkering with it a bit I finally arrived at the fix as posted in the aforementioned webdeveloper thread here.

posted by Jim Epler at 9:25 AM

4 Comments:

  • You can try using Other Alternate Browsers, if problem is really with your Internet Browser or the system.

    By Blogger danger456, at 6:30 AM  

  • Hi Jim,

    This has been wrecking my head for weeks now....i just found your post, and I am trying to do what it sounds like you achieved....only difference is that I am trying to achieve this with image maps over one image.

    So, I have one main image, and then using the DW javascript rollover functions...each image map displays a different image in the main source area when rolled over.

    I can't get anything to work!!! It is so frustrating. Any ideas on how to get this to work using image maps? How did you add the aplhaimageloader, where did you add that etc...? That might fix this for me

    Your response will be much appreciated Jim, thanks

    Brian

    By Blogger Brian Yerkes, at 6:57 PM  

  • Is the image map posted somewhere where I can look at it?

    By Blogger Jim Epler, at 3:26 PM  

  • This link deals with png fix for image maps.

    image maps fix

    I found it while look for a png fix for CSS sprites images which seems to be quite rare.

    By Anonymous Dan, at 2:10 AM  

Post a Comment

<< Home