Re: IE7 PNG transparency
Eric Bednarz
> In order to get IE to display properly a transparent .png all that is
> needed is to style it like this :
You mean IE6 in your subject line, right?
> image.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader
> (src="+ image.src+ ", sizingMethod='scale')";
>
> Or am I missing something ?
| AlphaImageLoader Filter
| Displays an image within the boundaries of the object and between the
| object background and content, […]
<http://msdn.microsoft.com/en-us/library/ms532969.aspx>
So what you are missing and what you need to get out of the way is the
(visibility of the) content. There are different approaches, personally
I would do something like
function png32(img) {
var span = document.createElement('SPAN');
img = img.parentNode.replaceChild(span, img);
span.appendChild(img);
img.style.visibility = 'hidden';
span.style.zoom = 1;
span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src + ", sizingMethod=crop)";
}
(Provided the replacement really needs to be dynamic. If not, I’d rather
hard-code that in the HTML and CSS, YMMD)
Jorge
Thanks Eric. I'll try that. Yes, I meant IE6.
BTW, do you know what's the best way to detect IE6 ?
--
Jorge.
Eric Bednarz
> BTW, do you know what's the best way to detect IE6 ?
Conditional Comments (in the HTML, not to be confused with JScript’s
Conditional Compilation, which cannot detect the browser version, and
don’t fall for the funny idea to infer the browser version from the
JScript version, which has never been a clever idea and has been
promoted from occasional to mainstream failure with XP’s Service Pack 3
:-).
Jorge
>
> So what you are missing and what you need to get out of the way is the
> (visibility of the) content. There are different approaches, personally
> I would do something like
>
> function png32(img) {
> var span = document.createElement('SPAN');
> img = img.parentNode.replaceChild(span, img);
> span.appendChild(img);
> img.style.visibility = 'hidden';
> span.style.zoom = 1;
> span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src + ", sizingMethod=crop)";
> }
>
Hi,
For some (unknown) reason, wrapping the <img>s with <span>s is giving
me layout (positioning) problems in the pages I'm currently working
on. I've found that reassigning the .src of the <img> to a (100%
transparent) .gif version of the same .png (of exactly the same
dimensions), does the trick:
<http://jorgechamorro.com/cljs/035/>
What do you think ?
Is there a better way ?
Thanks,
--
Jorge.
Eric Bednarz
> For some (unknown) reason, wrapping the <img>s with <span>s is giving
> me layout (positioning) problems in the pages I'm currently working
> on. I've found that reassigning the .src of the <img> to a (100%
> transparent) .gif version of the same .png (of exactly the same
> dimensions), does the trick:
That’s the most popular method I know (except making it the same size,
but you cannot set style using the image dimensions in this case, see
below). It’s also the most maintenance unfriendly method, errors during
e.g. CMS implementation are likely to go unnoticed, especially if nobody
of the developers uses IE6, etc. I don’t like it, but maybe it fits your
situation wel enough.
> <http://jorgechamorro.com/cljs/035/>
Eeks. Two points:
- Crop vs scale: I didn’t expect images to be resized by CSS (or the
width/height attributes of the IMG element type) in any public use case.
- The image is relatively positioned; removing that removes the layout
problem (using scale). If you think you cannot do that for some reason,
replacing the src may be the best way to go.
Jorge
I've ~copy-pasted this:
var isIE= false, ieVersion= 0;
(function () {
var appVersion = navigator.appVersion;
if ((appVersion.indexOf("MSIE") != -1) &&
(appVersion.indexOf("Macintosh") == -1))
{
var temp = appVersion.split("MSIE");
ieVersion = parseFloat(temp[1]);
isIE = true;
}
})();
It's not good ?
I'd prefer a way to detect it in JavaScript, so that I'll have to
modify just *one* .js file, instead of each and every .html.
TIA,
--
Jorge.
Jorge
>
> That’s the most popular method I know (except making it the same size,
> but you cannot set style using the image dimensions in this case, see
> below). It’s also the most maintenance unfriendly method, errors during
> e.g. CMS implementation are likely to go unnoticed, especially if nobody
> of the developers uses IE6, etc. I don’t like it, but maybe it fits your
> situation wel enough.
>
I've seen them being replaced by a single (always the same) 1*1 pixels
transparent gif. It doesn't work for me because (I guess) my .png's
"height"s aren't setup explicitly in the markup (only their "width"s).
If I use a 1*1 pixel (square) .gif, they're scaled as a square even
though they are rectangular (the scaled "height"s are wrong).
--
Jorge.
Eric Bednarz
> On Jan 26, 12:40 am, Eric Bednarz <bedn...@fahr-zur-hoelle.org> wrote:
>> Jorge <jo...@jorgechamorro.com> writes:
>> > BTW, do you know what's the best way to detect IE6 ?
>>
>> Conditional Comments […]
> var appVersion = navigator.appVersion;
[…]
> It's not good ?
Do you read this newsgroup? ;-)
> I'd prefer a way to detect it in JavaScript, so that I'll have to
> modify just *one* .js file, instead of each and every .html.
Well, you asked for the best way (enfin, the best way is to avoid the
issue), not the laziest way (and there’s a jillion ways to mangle
templates and be lazy *and* have stuff done in every file).
Otherwise, the least you could do is wrap the sniffing in a Conditional
Compilation block. Since the UA version sniffing is doomed to fail in
some cirsumstances anyway, you could as well do some naive
feature-to-version mapping which is substantially shorter and probably
even less likely to err, e.g.
var isIE6 = false /*@cc_on || !!(!window.XMLHttpRequest && document.compatMode) @*/;
Jorge
> Otherwise, the least you could do is wrap the sniffing in a Conditional
> Compilation block. Since the UA version sniffing is doomed to fail in
> some cirsumstances anyway, you could as well do some naive
> feature-to-version mapping which is substantially shorter and probably
> even less likely to err, e.g.
>
> var isIE6 = false /*@cc_on || !!(!window.XMLHttpRequest && document.compatMode) @*/;
Cool... so this is my "final" version:
var isIE= false /*@cc_on || true @*/;
var isIE6= isIE /*@cc_on && !!(!window.XMLHttpRequest &&
document.compatMode) @*/;
function fixPNG (img) {
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src +
", sizingMethod='scale')";
var src= img.src;
img.src= src.substring(0, src.indexOf('.png'))+ ".gif";
}
if (isIE6) {
var pngs= document.getElementsByTagName('IMG');
var e, n= pngs.length;
while (n--) {
((e= pngs[n]).src.indexOf('.png') >= 0) && fixPNG(e);
}
}
Thanks !
--
Jorge.
David Mark
> On Jan 27, 10:38 pm, Eric Bednarz <bedn...@fahr-zur-hoelle.org> wrote:
>
> > Otherwise, the least you could do is wrap the sniffing in a Conditional
> > Compilation block. Since the UA version sniffing is doomed to fail in
> > some cirsumstances anyway, you could as well do some naive
> > feature-to-version mapping which is substantially shorter and probably
> > even less likely to err, e.g.
>
> > var isIE6 = false /*@cc_on || !!(!window.XMLHttpRequest && document.compatMode) @*/;
>
> Cool... so this is my "final" version:
>
> var isIE= false /*@cc_on || true @*/;
You didn't use this one.
> var isIE6= isIE /*@cc_on && !!(!window.XMLHttpRequest &&
> document.compatMode) @*/;
I can buy that as a multiple object inference for IE6 as it is wrapped
in cc, but why are you just looking for IE6? Does 5.5 support
translucent PNG's? Certainly it supports DirectX.
>
> function fixPNG (img) {
> img.style.filter =
> "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src +
> ", sizingMethod='scale')";
> var src= img.src;
> img.src= src.substring(0, src.indexOf('.png'))+ ".gif";
That's ugly. Use a regular expression. And why are you changing to
GIF's *and* fixing the original PNG's?
>
> }
>
> if (isIE6) {
> var pngs= document.getElementsByTagName('IMG');
> var e, n= pngs.length;
> while (n--) {
> ((e= pngs[n]).src.indexOf('.png') >= 0) && fixPNG(e);
That line needs to be re-written.
wilq
IE is get freeze when there are lot of images! It's because of DirectX
Filter AlphaImageLoader that block whole browser until image to show
is downloaded from internet. This is trival problem when dealing with
few images, but this is unacceptable problem when u got lot images.
There is second a less known solution that uses VML, but it makes
download of images twice, and its worser for any animations. In fact
PNG24 just sux for IE and its better to use PNG8 for IE6 only, rather
that using solutions that will freeze IE...
Read a little about problem with png here.
Jorge
> On Jan 28, 6:53 am, Jorge <jo...@jorgechamorro.com> wrote:
>
> > var isIE= false /*@cc_on || true @*/;
>
> You didn't use this one.
Yes, somewhere else.
> > var isIE6= isIE /*@cc_on && !!(!window.XMLHttpRequest &&
> > document.compatMode) @*/;
>
> I can buy that as a multiple object inference for IE6 as it is wrapped
> in cc, but why are you just looking for IE6? Does 5.5 support
> translucent PNG's? Certainly it supports DirectX.
I don't know. But I don't care. It's been more than enough for me to
deal with IE6...
> > function fixPNG (img) {
> > img.style.filter =
> > "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src +
> > ", sizingMethod='scale')";
> > var src= img.src;
> > img.src= src.substring(0, src.indexOf('.png'))+ ".gif";
>
> That's ugly. Use a regular expression.
No, it isn't ugly. It's 100% ok. More so as I'm not well-versed in
RegExps.
> And why are you changing to
> GIF's *and* fixing the original PNG's?
In order to "make" them transparent. Maybe an .opacity= 0; (or
whatever it is in IE) would have made the trick ? What do you think ?
> > ((e= pngs[n]).src.indexOf('.png') >= 0) && fixPNG(e);
>
> That line needs to be re-written.
Over my cold, dead body !
--
Jorge.
Garrett Smith
Looping through all the images in the document and calling functions on
them is a lot of work.
Why not just fix the image(s) needing a fix?
--
comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
David Mark
> On Feb 6, 2:46 am, David Mark <dmark.cins...@gmail.com> wrote:
>
> > On Jan 28, 6:53 am, Jorge <jo...@jorgechamorro.com> wrote:
>
> > > var isIE= false /*@cc_on || true @*/;
>
> > You didn't use this one.
>
> Yes, somewhere else.
>
> > > var isIE6= isIE /*@cc_on && !!(!window.XMLHttpRequest &&
> > > document.compatMode) @*/;
>
> > I can buy that as a multiple object inference for IE6 as it is wrapped
> > in cc, but why are you just looking for IE6? Does 5.5 support
> > translucent PNG's? Certainly it supports DirectX.
>
> I don't know. But I don't care. It's been more than enough for me to
> deal with IE6...
Okay, but if you find that compatMode and XMLHttpRequest are undefined
(within IE cc), you have something older than IE6 and DirectX filters
came out in IE4.
>
> > > function fixPNG (img) {
> > > img.style.filter =
> > > "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src +
> > > ", sizingMethod='scale')";
> > > var src= img.src;
> > > img.src= src.substring(0, src.indexOf('.png'))+ ".gif";
>
> > That's ugly. Use a regular expression.
>
> No, it isn't ugly. It's 100% ok. More so as I'm not well-versed in
> RegExps.
>
> > And why are you changing to
> > GIF's *and* fixing the original PNG's?
>
> In order to "make" them transparent. Maybe an .opacity= 0; (or
> whatever it is in IE) would have made the trick ? What do you think ?
No, opacity has nothing to do with it. There are tons of examples out
there for loading translucent PNG's in IE < 7. If you replace the
images with GIF's (best done with conditional comments, not
conditional compilation), you don't need any DirectX hacks at all (and
the results won't be translucent.)
>
> > > ((e= pngs[n]).src.indexOf('.png') >= 0) && fixPNG(e);
>
> > That line needs to be re-written.
>
> Over my cold, dead body !
>
Whatever. Don't mix assignments, expressions and function calls in
this manner. Think of the people who will have to read this code
later.
Jorge
> On Feb 6, 5:38 am, Jorge <jo...@jorgechamorro.com> wrote:
> > On Feb 6, 2:46 am, David Mark <dmark.cins...@gmail.com> wrote:
>
> > > And why are you changing to
> > > GIF's *and* fixing the original PNG's?
>
> > In order to "make" them transparent. Maybe an .opacity= 0; (or
> > whatever it is in IE) would have made the trick ? What do you think ?
>
> No, opacity has nothing to do with it. There are tons of examples out
> there for loading translucent PNG's in IE < 7. If you replace the
> images with GIF's (best done with conditional comments, not
> conditional compilation), you don't need any DirectX hacks at all (and
> the results won't be translucent.)
That filter sandwiches the (fixed .png) image between the element and
its background. As I'm applying it to the .png <img> element, the
(badly rendered) .png covers the fixed image (it's the top layer of
the sandwich). So, I need that top layer to be transparent, and I do
it by replacing its .src with that of an equally-sized 100%
transparent .gif. So the end result is better than that of a gif (a
transparent .gif doesn't mix perfectly with the background).
--
Jorge.
Jorge
>
> Looping through all the images in the document and calling functions on
> them is a lot of work.
>
> Why not just fix the image(s) needing a fix ?
I use .png(s) only where I need transparency, so in the end, being
a .png -> needs to be fixed.
--
Jorge.
David Mark
Right. I misread what you were doing. Typically I replace
translucent PNG's with slightly lesser GIF's in style sheets that are
hidden inside IE conditional comments. It looked to me like you were
doing something similar in script.
Jorge
>
> Read a little about problem with png here.
>
> http://www.dcomments.com/Ajax/group7435/topic94945.htm
I don't get what's the deal with the underscore before the filter
(_filter) ?
Thanks,
--
Jorge.
David Mark
It is the same sort of CSS hack that broke lots of sites when IE7 came
out.
SAM
You mean that the underscore hack doesn't please to IE.7 ?
Or is it only about filter <-> _filter ?
filter doesn't need any hack, no?
or it is understood by the browser or it is not and it is passed over.
--
sm
David Mark
wrote:
> Le 2/7/09 11:11 AM, David Mark a écrit :
>
> > On Feb 7, 5:01 am, Jorge <jo...@jorgechamorro.com> wrote:
> >> On Feb 6, 9:57 am, wilq <wil...@gmail.com> wrote:
>
> >>> Read a little about problem with png here.
> >>>http://www.dcomments.com/Ajax/group7435/topic94945.htm
> >> I don't get what's the deal with the underscore before the filter
> >> (_filter) ?
>
> > It is the same sort of CSS hack that broke lots of sites when IE7 came
> > out.
>
> You mean that the underscore hack doesn't please to IE.7 ?
> Or is it only about filter <-> _filter ?
IE7 discards the bogus rule as it should. IE6 does not. The author
is using this discrepancy to target IE6. It's a pretty obscure and
clumsy way to go about such a thing.
>
> filter doesn't need any hack, no?
Just keep it away from non-IE browsers with conditional comments.
> or it is understood by the browser or it is not and it is passed over.
Browsers will throw out any rule they don't understand, often logging
a warning. Visit almost any site with Firebug on and watch the whole
console turn green (often interspersed with bits of red for script
errors.) One of Google's properties warns against enabling Firebug as
it can slow it down if not "configured correctly." Probably that
means they log so many warnings and exceptions that Firebug hogs the
browser's resources during page loads.
SAM
> On Feb 7, 10:12 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
> wrote:
>
>> filter doesn't need any hack, no?
>
> Just keep it away from non-IE browsers with conditional comments.
That needs 3 lines more :-/
>> or it is understood by the browser or it is not and it is passed over.
>
> Browsers will throw out any rule they don't understand, often logging
> a warning. Visit almost any site with Firebug on and watch the whole
no need of Firebug the Firefox's console reports too these errors
> console turn green (often interspersed with bits of red for script
> errors.) One of Google's properties warns against enabling Firebug as
> it can slow it down if not "configured correctly." Probably that
> means they log so many warnings and exceptions that Firebug hogs the
> browser's resources during page loads.
I didn't see so slow loading (in Google search)
Anyway I do not (and I don't want to) know how to configure Firebug.
--
sm