Button With Image And Text

Last post 12-04-2008 12:17 PM by rmdw. 24 replies.

Sort Posts:

  • Button With Image And Text

    09-06-2006, 2:47 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10

    I must be barking up the wrong tree because I have found nothing in the internet about this. I'd like to know how to achieve a server control that renders something like this...

    <button><img src="new.gif" /> New</button>

    I can't seem to get anywhere with it though. What gives? 

    Filed under: , , ,
  • Re: Button With Image And Text

    09-06-2006, 2:49 PM
    • All-Star
      32,470 point All-Star
    • augustwind
    • Member since 07-21-2002, 11:16 PM
    • Garland, TX
    • Posts 4,546
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    The regular button just shows text - the ImageButton does exactly what the button does, but you can use an image for it's GUI representation.

    So, are you saying that you want a button to show an image AND text on the button?

    David Wier
    MCP/ASPInsider
    ASPNet101.com - where to look first!
    Replace It! - the newest from August Wind - search/replace in multiple files
    Control Grouper - easily control properties for multiple controls with one control!
    Calendar Express - The Best HTML Calendar Generator on the web!
    (Please 'Mark as Answer' when it applies)
  • Re: Button With Image And Text

    09-06-2006, 2:50 PM
    • Contributor
      2,294 point Contributor
    • Connect
    • Member since 12-02-2005, 12:56 PM
    • UK
    • Posts 455
    The asp:ImageButton control, perhaps? Alternatively you can add an image to a HyperLink using it's ImageUrl property.

    If you really want both text and an image on a button then you'll have to write your own control as it's very non-standard.
  • Re: Button With Image And Text

    09-06-2006, 2:56 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10
    Yes, exactly.
  • Re: Button With Image And Text

    09-06-2006, 3:00 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10
    I don't understand why it is non-standard. Is it literally not supported by the XHTML standard? I would understand if that was the case. But both Firefox and IE6 render my example perfectly. I realize that doesn't mean it's valid HTML, but it makes me think that it might be. Am I the only person that wants an image on a button, as well as text, but doesn't want to render the entire representation of it? We've had this in WinForms since .Net 1.0. And it's doable, and maybe valid, in HTML. So why not?
  • Re: Button With Image And Text

    09-06-2006, 3:06 PM
    • All-Star
      32,470 point All-Star
    • augustwind
    • Member since 07-21-2002, 11:16 PM
    • Garland, TX
    • Posts 4,546
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs
    There are a lot of things doable in WinForms that are either not possible or quite difficult to accomplish in WebForms - the web platform - it's basically the nature of the beast, as it is today.
    David Wier
    MCP/ASPInsider
    ASPNet101.com - where to look first!
    Replace It! - the newest from August Wind - search/replace in multiple files
    Control Grouper - easily control properties for multiple controls with one control!
    Calendar Express - The Best HTML Calendar Generator on the web!
    (Please 'Mark as Answer' when it applies)
  • Re: Button With Image And Text

    09-06-2006, 3:13 PM
    • Contributor
      2,294 point Contributor
    • Connect
    • Member since 12-02-2005, 12:56 PM
    • UK
    • Posts 455
    johndehope3:
    I don't understand why it is non-standard. Is it literally not supported by the XHTML standard?


    What is the (X)HTML you are using that is rendering? If it's anything like:

    <input type="button" text="Button" ><img src="image.gif" /></input>

    then that is totally invalid XHTML. The web is competetly different to Windows forms.
  • Re: Button With Image And Text

    09-06-2006, 3:20 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10

    I realize that the web and winforms are totally different. My point is that if it's trivial and doable on winforms, and it has been for a long time, and it's trivial and doable in HTML (standards aside) then shouldn't we have it by now? If it was rocket science to accomplish, I'd understand, but evidently it isn't.

    I was aiming for something like...

    <button><img ...> Text</button>
     

  • Re: Button With Image And Text

    09-06-2006, 3:30 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10

    According to About.Com the BUTTON tag is valid XHTML and the IMG element is valid within a BUTTON...

    http://webdesign.about.com/od/htmltags/p/bltags_button.htm
     

  • Re: Button With Image And Text

    09-06-2006, 3:41 PM
    • Contributor
      2,294 point Contributor
    • Connect
    • Member since 12-02-2005, 12:56 PM
    • UK
    • Posts 455
    johndehope3:
    I realize that the web and winforms are totally different.

    I'm not quite sure you do, to be honest, from what you are saying.
    My point is that if it's trivial and doable on winforms, and it has been for a long time, and it's trivial and doable in HTML (standards aside) then shouldn't we have it by now?

    You can't just say "standards aside" as if that is a minor point. Whether it's doable on winforms is totally irrelevent - Microsoft did not create (X)HTML. The standards for web markup are goverened by The World Wide Web Consortium. All Asp .NET controls HAVE to render valid HTML markup otherwise there is no guarantee how a browser will render it now or in the future. You can't just brush standards aside as if they don't matter. The web isn't a single platform running on one operating system - it encompasses many different browsers, some of which (such as screen readers or mobile browsers may not even render images).

    To do what you want to do in ASP .NET you'd need to do something like this:

    <asp:LinkButton ID="LinkButton1" runat="Server" OnClick="ButtonClick_Event">Text</asp:LinkButton>
    <asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="image.gif" OnClick="ButtonClick_Event"></asp:ImageButton>

    You could then write a custom server or user control to encapsulate those controls so they only expose the properties you wish to set once, such as the event when clicked.

  • Re: Button With Image And Text

    09-06-2006, 3:50 PM
    • Contributor
      2,294 point Contributor
    • Connect
    • Member since 12-02-2005, 12:56 PM
    • UK
    • Posts 455
    johndehope3:

    According to About.Com the BUTTON tag is valid XHTML and the IMG element is valid within a BUTTON...

    http://webdesign.about.com/od/htmltags/p/bltags_button.htm


    Well, frankly, they are completely wrong. The W3C lays down the spec for HTML and they state clearly that you cannot have an image tag within a button tag. They even explicitly point this out on the link:

    LLEGAL EXAMPLE:
    The following is not legal HTML.
    <BUTTON>
    <IMG src="foo.gif" usemap="...">
    </BUTTON>

    You may, be able to get away with this in strict XHTML, as it's more flexible, but it's not something that can be guaranteed to work across all browsers.
  • Re: Button With Image And Text

    09-06-2006, 3:58 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10
    I agree a custom server or user control looks like what I need. But I honestly don't have the time to do it. I was hoping somebody would have already run up against this before. It seems so obvious to me. I just want a control that generates some perfectly valid HTML that looks very nice. It shouldn't be so hard.
  • Re: Button With Image And Text

    09-11-2006, 7:51 AM
    • Member
      10 point Member
    • nseidenfeld
    • Member since 07-19-2006, 12:07 PM
    • Posts 2
    Anyone take time to make a control for this? I too need a link button with both an image and text
  • Re: Button With Image And Text

    09-12-2006, 1:52 PM
    • Member
      50 point Member
    • johndehope3
    • Member since 09-06-2006, 6:43 PM
    • Posts 10
    I am working on a custom control that will do it. If I get past the last hurdle (see my recent post regarding custom controls and "potentially dangerous Request.Form..") then I'll post it on CodeProject. In short, the rendered button tag tries to put all of it's content (in this case that includes an HTML IMG tag) into the postback form, which asp.net interprets as a hacking attempt. Hopefully somebody out here will know how to fix it, and we can all have ImageTextButtons!
  • Re: Button With Image And Text

    10-04-2006, 11:20 PM

    Adding an image to a button, is easy.

     First you need to create you link button. Lets say:

    <asp:LinkButton CssClass="lnkSubmit" ID="lnkButton" runat="server">SUBMIT</asp:LinkButton>

    Then you specify a CssClass.

    I have created a style sheet with the following:

    You can add this to any hyperlink as well.

    a.lnkSubmit:active {

    margin:0px 0px 0px 0px;
    background:url(../../images/li_bg1.jpg) left center no-repeat;
    padding: 0em 1.2em;
    font: 8pt "tahoma";
    color: #336699;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0px
    ;

                                   }

    a.lnkSubmit:link {

    margin:0px 0px 0px 0px;
    background:url(../../images/li_bg1.jpg) left center no-repeat;
    padding: 0em 1.2em;
    font: 8pt "tahoma";
    color: #336699;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0px
    ;

                                   }

    a.lnkSubmit:visited {

    margin:0px 0px 0px 0px;
    background:url(../../images/li_bg1.jpg) left center no-repeat;
    padding: 0em 1.2em;
    font: 8pt "tahoma";
    color: #336699;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0px
    ;

                                   }

    a.lnkSubmit:hover {

    margin:0px 0px 0px 0px;
    background:url(../../images/li_bg1.jpg) left center no-repeat;
    padding: 0em 1.2em;
    font: 8pt "tahoma";
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0px
    ;

                                   }

     

    Enjoy!

    DotNetSlave.com

    www.DotNetSlave.com
Page 1 of 2 (25 items) 1 2 Next >