i can second that - a sample page would be of great help. thanks in advance!
s On 26/02/07, Weaver, Scott <[EMAIL PROTECTED]> wrote: > I have seen a number requests and solutions for fixing PNG image > transparency in IE on the list. However, I have never seen one that > addresses transparency of PNGs when they are used as backgrounds. I > prefer using elements plus background images for my icons as opposed to > image tags so I can use style sheets to switch icon sets out. So, > needing to support PNG transparencies in backgrounds I came up with two > possible solutions. > > Non-jQuery solution: > > I build upon what Klaus already has for supporting transparent PNG > images > (http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy > /) > > div.png { > background-image: expression( > bg = this.runtimeStyle.backgroundImage.length > 0 ? > this.runtimeStyle.backgroundImage : this.currentStyle.backgroundImage, > > this.runtimeStyle.backgroundImage = "none", > src = bg.substring(5,bg.length-2), > this.runtimeStyle.filter = > "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', > sizingMethod='scale')" > ); > } > > Problems with this approach (yeah, like you are surprised) > > 1. It can become inefficient. I my case, my icons appear in an icon bar > that is shown/hidden via a $.slideToggle() effect. It is initially > hidden, and is shown through a button event. The above code actually > executes twice the first time the icon bar is displayed. Then, once for > each time it displayed after the initial call to display. IMOHO, this > is less than efficient, then again I would expect nothing less from IE. > > 2. The repeated script calls of the CSS expression made the slide > animation choppy. > > The jQuery solution: > > The jQuery solution was actually my first solution but I wanted try to > follow Klaus' example using just CSS. Unfortunately, the "pure" CCS > solution wasn't working for me as well as I felt it should, so I > reverted back to using my plugin. > > jQuery.fn.fixPngBackgrounds = function() { > if($.browser.msie) > { > this.each(function () { > var currentBkg = this.currentStyle.backgroundImage; > if(currentBkg && currentBkg.length > 0) > { > this.runtimeStyle.backgroundImage = "none"; // Remove > the existing background > var urlOnly = currentBkg.substring(5, > (currentBkg.length-2)); // Strip 'url(" and '")' > this.runtimeStyle.filter = > "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + urlOnly + > "', sizingMethod='scale')" > } > }); > } > } > > > And it's easy to use, just $(".png").fixPngBackgrounds() > > I just came up with this today and it appears to be working quite well. > However, any suggestion on improvements or possible gotchas regarding > either approach is more than welcome. > > Regards, > -scott > > _______________________________________________ > jQuery mailing list > [email protected] > http://jquery.com/discuss/ > -- dress up. leave a false name. be legendary. _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
