The Daily Click ::. Forums ::. General Chat ::. PNG test site
 
Post Reply  Post Oekaki 
 

Posted By Message

Long John Kickbag


Registered
  26/08/2002
Points
  148
12th January, 2005 at 17:20:27 -

Firefox 0.9.3 displays it right (has the right status bar text too). By the way, even with that filter IE doesn't display it quite right, it actually darkens the image slightly for some reason.

 
Resize! - www.clicksplat.com/comparison.html

醤油の兵士
Almost Human

Registered
  12/06/2002
Points
  173

VIP Member
12th January, 2005 at 19:39:31 -

eh, what's this about mac *looks at avatar*

You can tell opera to say it is a certain web browser, same with FF (if you get the plugin)

 
As a boy, I wanted to be a train. I didn’t realize this was unusual—that other kids played with trains, not as them.

Long John Kickbag


Registered
  26/08/2002
Points
  148
13th January, 2005 at 11:46:18 -

If you use this:

if(obj.style.filter.substring(0,50) == "progidXImageTransform.Microsoft.AlphaImageLoader")
{
obj.src = "blank.gif";
window.status = "IE is using PNG filter";
}

Then it should stop it messing up if the user makes there browser says it's a different browser, and if it's an older version of IE then it will still display a picture.

 
Resize! - www.clicksplat.com/comparison.html

ChrisB
Crazy?

Registered
  16/08/2002
Points
  5457
13th January, 2005 at 12:36:48 -

But won't that cause errors for the browsers that don't have the 'filter' property?

 
n/a

Long John Kickbag


Registered
  26/08/2002
Points
  148
13th January, 2005 at 17:18:29 -

No, for graceful downgrading reasons (basically so people can make webpages in newer CSS versions without it not working on anything but the newest browsers), browsers automatically assign undefined properties to "".

(Accidently typed HTML instead of CSS.)

Image Edited by the Author.

 
Resize! - www.clicksplat.com/comparison.html

Long John Kickbag


Registered
  26/08/2002
Points
  148
15th January, 2005 at 19:47:07 -

Here's an automated way to allow alpha channels in IE 6 and still display an image in most other browers.

Make a blank image called blank.gif and put it in the same directory as your file (or remember to change it in the javascript).

Insert this somewhere in the body part of your file (browsers that don't support the filter style don't ignore it if you change it with javascript):
< img id="dxalphatest" style="width:0px;height:0px;filter:filtertest" /> (remove the space at the start)

(Note that this will actually invalidate your document (if you actually care) because filter isn't a real CSS property.)

Then put this after all your image definitions: 


<script type="text/javascript">


if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.indexOf("MSIE 6.0") != -1 && 





document.getElementById("dxalphatest").style.filter)


	if(document.getElementById("dxalphatest").style.filter == "filtertest")


	{


		for(var curimage = document.images.length-1; curimage > 0; curimage--)


			document.images[curimage].style.filter = 





"progidXImageTransform.Microsoft.AlphaImageLoader(src='"+document.images[curimage].src+"',sizingMethod='scale')";





		for(var curimage = document.images.length-1; curimage > -1; curimage--)


			document.images[curimage].src = "blank.gif";


	}


</script>


That should work on a majority of browsers.

Image Edited by the Author.

 
Resize! - www.clicksplat.com/comparison.html

JP


Registered
  07/06/2003
Points
  1338
15th January, 2005 at 21:16:23 -

if the mac people are going to represent.... *hoists his colors*

 
Steve Zissou: Anne-Marie, do all the interns get Glocks?

Anne-Marie: No, they have to share one.

DeadmanDines
Best Article Writer

Registered
  27/04/2006
Points
  4758
16th January, 2005 at 11:47:00 -

I've personally found defining this as a function works fine in all the browsers I've tested (Netscape, IE6, Firefox, Opera):

<script language="javascript">
 window.status = "Browser not using PNG filter";
 function png_check(obj){
    if(obj.style.filter.substring(0,50) == "progidXImageTransform.Microsoft.AlphaImageLoader")
     {
      obj.src = "blank.gif";
      window.status = "IE is using PNG filter";
     }
 }
</script>

Then just call it with the ID of my image.

Image Edited by the Author.

 
191 / 9999 * 7 + 191 * 7
   

Post Reply



 
Advertisement

Worth A Click