Transparent PNG

[Martin Eyles]

I am trying to make image alpha transparency work in IE6. I was hoping

<img src="Graphics/TransparentLogo.png" width="249" height="42">

would work, but it doesn't. After looking around I found the work around

<div
style="FILTERrogidXImageTransform.Microsoft.AlphaImageLoader(src='Graphi
cs/LineViewTransparentLogo.png');WIDTH:249px;HEIGHT:42px">
<img src="Graphics/TransparentLogo.png" width="249" height="42"
style="FILTER:Alpha(opacity=0)">
</div>

which works perfectly, but is very ugly. I was hoping that by using the
asp:image tag, I would output the ugly version to IE6, and the neat version
to other browsers. I tried

<asp:image width="249" height="42" imageurl="Graphics/TransparentLogo.png"
alternatetext="LineViewT" runat="server" id="Image1">
</asp:image>

but this always outputs the neat non-working (in IE6) version. Is there a
way to make it output the different version, depending on the browser is
detects?

Thanks,
ME

 

[Franck Quintana]

Hi,

You can create a webcontrol which derives from HtmlImage.
On PreRender you have to check HttpContext.Current.Request.Browser.... to
find what is the current browser used by the client.
After that you modify or add style property and it's good.

Franck.

I don't know if you have yet created webcontrols. So i can give you a sample
i have done.
It's a webcontrol i use to change the style of an image when the mouse
hovers on.

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

namespace eMill.UI.Web.Controls

{

/// <summary>

/// Summary description for HoverImage.

/// </summary>

public class HoverImage : HtmlImage

{

public HoverImage() {}

public string ToolTip {

get {

Object savedState = this.ViewState["ToolTip"];

if ( savedState != null ) {

return (string)savedState;

}

return string.Empty;

}

set {

this.ViewState["ToolTip"] = value;

}

}

public string HoverImageSrc {

get {

Object savedState = this.ViewState["HoverImageSrc"];

if ( savedState != null ) {

return (string)savedState;

}

return string.Empty;

}

set {

this.ViewState["HoverImageSrc"] = value;

}

}

protected override void RenderAttributes(HtmlTextWriter writer) {

if(HoverImageSrc.Length > 0) {

Attributes.Add("onmousemove", "this.src=\"" + HoverImageSrc + "\"");

Attributes.Add("onmouseout", "this.src=\"" + Src + "\"");

}

if(ToolTip.Length > 0) {

Attributes.Add("title", ToolTip);

}

base.RenderAttributes (writer);

}

}

}


Hope this helps!
Franck.

| I am trying to make image alpha transparency work in IE6. I was hoping
|
| <img src="Graphics/TransparentLogo.png" width="249" height="42">
|
| would work, but it doesn't. After looking around I found the work around
|
| <div
|
style="FILTERrogidXImageTransform.Microsoft.AlphaImageLoader(src='Graphi
| cs/LineViewTransparentLogo.png');WIDTH:249px;HEIGHT:42px">
| <img src="Graphics/TransparentLogo.png" width="249" height="42"
| style="FILTER:Alpha(opacity=0)">
| </div>
|
| which works perfectly, but is very ugly. I was hoping that by using the
| asp:image tag, I would output the ugly version to IE6, and the neat
version
| to other browsers. I tried
|
| <asp:image width="249" height="42" imageurl="Graphics/TransparentLogo.png"
| alternatetext="LineViewT" runat="server" id="Image1">
| </asp:image>
|
| but this always outputs the neat non-working (in IE6) version. Is there a
| way to make it output the different version, depending on the browser is
| detects?
|
| Thanks,
| ME
|
| --
| Martin Eyles
| (e-mail address removed)
|
|

 

[bruce barker]

why don't you just convert the image to a transparent gif, which is
supported by IE.

-- bruce (sqlwork.com)

| I am trying to make image alpha transparency work in IE6. I was hoping
|
| <img src="Graphics/TransparentLogo.png" width="249" height="42">
|
| would work, but it doesn't. After looking around I found the work around
|
| <div
|
style="FILTERrogidXImageTransform.Microsoft.AlphaImageLoader(src='Graphi
| cs/LineViewTransparentLogo.png');WIDTH:249px;HEIGHT:42px">
| <img src="Graphics/TransparentLogo.png" width="249" height="42"
| style="FILTER:Alpha(opacity=0)">
| </div>
|
| which works perfectly, but is very ugly. I was hoping that by using the
| asp:image tag, I would output the ugly version to IE6, and the neat
version
| to other browsers. I tried
|
| <asp:image width="249" height="42" imageurl="Graphics/TransparentLogo.png"
| alternatetext="LineViewT" runat="server" id="Image1">
| </asp:image>
|
| but this always outputs the neat non-working (in IE6) version. Is there a
| way to make it output the different version, depending on the browser is
| detects?
|
| Thanks,
| ME
|
| --
| Martin Eyles
| (e-mail address removed)
|
|

 

[Martin Eyles]

why don't you just convert the image to a transparent gif, which is
supported by IE.

I will have no alpha layer anti-aliasing in a gif, so will have jagged
edges.

 

[Franck Quintana]

First PNG is normalized
Second PNG can have more than 256 Colors.
Third PNG has gradient transparency.

Franck.

| why don't you just convert the image to a transparent gif, which is
| supported by IE.
|
| -- bruce (sqlwork.com)
|

 

[Hans Kesting]

I am trying to make image alpha transparency work in IE6. I was hoping

<img src="Graphics/TransparentLogo.png" width="249" height="42">

would work, but it doesn't. After looking around I found the work
around

<div
style="FILTERrogidXImageTransform.Microsoft.AlphaImageLoader(src='Graphi
cs/LineViewTransparentLogo.png');WIDTH:249px;HEIGHT:42px">
<img src="Graphics/TransparentLogo.png" width="249" height="42"
style="FILTER:Alpha(opacity=0)">
</div>

which works perfectly, but is very ugly. I was hoping that by using
the asp:image tag, I would output the ugly version to IE6, and the
neat version to other browsers. I tried

<asp:image width="249" height="42"
imageurl="Graphics/TransparentLogo.png" alternatetext="LineViewT"
runat="server" id="Image1"> </asp:image>

but this always outputs the neat non-working (in IE6) version. Is
there a way to make it output the different version, depending on the
browser is detects?

Thanks,
ME

see here:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

 

[Martin Eyles]

see here:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Thanks Hans, the javascript code is very useful. Don't like the 'behaviour'
idea, but I'll fix that and make it normal javascript.

ME