Transparent PNG

Discussion in 'ASP .Net' started by Martin Eyles, Dec 1, 2004.

  1. Martin Eyles

    Martin Eyles Guest

    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="FILTER:progid:DXImageTransform.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
    Martin Eyles, Dec 1, 2004
    #1
    1. Advertising

  2. 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.

    "Martin Eyles" <> wrote in message
    news:...
    | 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="FILTER:progid:DXImageTransform.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
    |
    |
    |
    Franck Quintana, Dec 1, 2004
    #2
    1. Advertising

  3. Martin Eyles

    bruce barker Guest

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

    -- bruce (sqlwork.com)

    "Martin Eyles" <> wrote in message
    news:...
    | 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="FILTER:progid:DXImageTransform.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
    |
    |
    |
    bruce barker, Dec 1, 2004
    #3
  4. Martin Eyles

    Martin Eyles Guest

    "bruce barker" <> wrote in message
    news:...
    > 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.

    --
    Martin Eyles
    Martin Eyles, Dec 1, 2004
    #4
  5. First PNG is normalized :)
    Second PNG can have more than 256 Colors.
    Third PNG has gradient transparency.

    Franck.

    "bruce barker" <> wrote in message
    news:...
    | why don't you just convert the image to a transparent gif, which is
    | supported by IE.
    |
    | -- bruce (sqlwork.com)
    |
    Franck Quintana, Dec 1, 2004
    #5
  6. Martin Eyles

    Hans Kesting Guest

    Martin Eyles wrote:
    > 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="FILTER:progid:DXImageTransform.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
    Hans Kesting, Dec 1, 2004
    #6
  7. Martin Eyles

    Martin Eyles Guest

    "Hans Kesting" <> wrote
    > Martin Eyles wrote:
    > > 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....

    >
    > 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

    --
    Martin Eyles
    Martin Eyles, Dec 2, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrea Fino

    transparent png on explorer

    Andrea Fino, Apr 13, 2004, in forum: HTML
    Replies:
    17
    Views:
    669
    Mark Parnell
    Apr 14, 2004
  2. Susanne
    Replies:
    8
    Views:
    595
    Tim Fitzgerald
    Aug 2, 2004
  3. Martin
    Replies:
    15
    Views:
    2,503
    Steve Pugh
    Jul 21, 2005
  4. Jafar As-Sadiq Calley

    Transparent png's

    Jafar As-Sadiq Calley, Sep 16, 2005, in forum: HTML
    Replies:
    16
    Views:
    761
    Jafar As-Sadiq Calley
    Sep 19, 2005
  5. Alex
    Replies:
    1
    Views:
    707
    Steve W. Jackson
    May 2, 2006
Loading...

Share This Page