Thursday, July 7, 2022
  • Home

Transparent Images in IE7

April 5th, 2006 by Patrick S

Remember back in the day where you could easily have transparent signatures abd images on your page. Firefox still supports this feature but Internet Explorer didn’t…UNTIL NOW.

Now you can put transparent images on your page without any hassle at all with a small snippet of code 😀

 Check out my demo page HERE

If used inline, the code runs after any existing onLoad code has completed. If used as an include file, the DEFER keyword ensures it is run when the DOM has loaded, but before the images are rendered. It converts each PNG image into a span with the PNG's width and height attributes. The IE 5.5+ AlphaImageLoader filter is then applied to fill each new span with the original image. It is this filter which allows PNG transparency to work correctly - see KB 294714 for more details. Alt attributes are converted to titles for mouse hover text. Any existing in-line CSS declarations plus title, ID & class attributes are transferred to the new spans.Each new span has the declaration display:inline-block added - this enables the fix to work with "Standards mode" IE6 Doctypes. Finally, each replaced PNG is checked to see if it has the (deprecated) align="left" or align="right" attribute. If so, an appropriate CSS float declaration is added in-line in order to replicate the original alignment. Also, if the original image was used within an anchor as a link, then a hand cursor is applied to the new span in order to replicate the original link image cursor.

For more info check out this


Posted in Internet Explorer | Comments Off on Transparent Images in IE7

This entry was posted on Wednesday, April 5th, 2006 at 12:11 am and is filed under Internet Explorer. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.