Browser Detect for PNG/ GIF Alternatative

[SharezS]

Hi,


I am using PNG-24 images with alpha transparencies on a site. Since Internet explorer doesn't support the alpha transparencies, I would like to display GIF alternatives for IE. Where can I find a script that will detect the browser and display the appropiate image formats? I'm not an expert with Javascript, so a site with a tutorial would be appreciated but any help would also be greatly appreciated. The link to the site I am working on is lifesizeht.com/home.html


Sharez

P.S. I did a lot of research and I found a lot of scripts that show how to display the PNG in IE using a filter but I can't get any of them to work properly so I feel that using GIF alternatives would be an easier method.

[blm126]

Well, you could use IE7(click the link,it's not what you think) but conditional comments are the best tool for the job(if somewhat harder)

[Twey]

P.S. I did a lot of research and I found a lot of scripts that show how to display the PNG in IE using a filter but I can't get any of them to work properly so I feel that using GIF alternatives would be an easier method.

It may be easier, but it wouldn't be as good. You'd have to resort to "downlevel-revealed" conditional comments at best, which would render your page invalid.
If you can get one of those filter hacks working, it's best to do so:

<!-- Head: -->

<!--[if IE]><style type="text/css">
#alphaImage1 {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='firstAlphaImage.png', sizingMethod='scale');
}
</style><[endif]-->

<style type="text/css">
#alphaImage1 {
  height: 100px;
  width: 100px;
  background-image: url(firstAlphaImage.png) !important;
  background-image: none;
}
</style>

<!-- Body: -->

<div id="alphaImage1"></div>

/EDIT: From that link, LOL.

[mwinter]

I am using PNG-24 images with alpha transparencies on a site. Since Internet explorer doesn't support the alpha transparencies, I would like to display GIF alternatives for IE.

Reasonable enough.

Where can I find a script that will detect the browser and display the appropiate image formats?

You don't. Instead, you determine what the browser supports and serve the appropriate type.

The Accept HTTP request header indicates MIME types that the user agent supports. Of image/png and image/gif, IE only sends the latter, whilst Opera, Mozilla, and Konqueror send both and support alpha transparency.

Read up on how to perform content negotiation on your server. If you have a server-side programming language available, you could also use that.

P.S. I did a lot of research and I found a lot of scripts that show how to display the PNG in IE using a filter but I can't get any of them to work properly so I feel that using GIF alternatives would be an easier method.

Using filters also depends upon client-side scripting (and possibly ActiveX; I've never actually checked). Though the GIF might not look quite as nice, it's more reliable. That said, there's no real harm in using both, together.

Mike

[SharezS]

Thank you all for your help. I decided to optimize the images in Fireworks by converting them to PNG-8 with alpha transparency. It looks great in Firefox (same as PNG-24) and it works in IE (doesn't look as good but it works).


Thanks again,


Sharez