locked
Add text over an image button RRS feed

  • Question

  • User1310055179 posted

    HI,

    I'm looking for a clean solution for how to add a number over an image button.

    I'm using an Image button for alerts icon and I need to add the number of new alerts over the image.

    <asp:ImageButton ID="NotificationsImageButton" runat="server" ImageUrl="~/Images/notification-bell.png" ToolTip="Messages" /><br />
    

     I can count the number of new alerts in code behind, but how do I add the number right over the image?

    Wednesday, June 12, 2019 10:16 AM

Answers

  • User-1038772411 posted

    Hii qsoft_developer,

    Try with this , I hope this will help you

    <button runat="server" 
      style="background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
      your text here<br/>and some more<br/><br/> and some more ....
      </button>

    To clarify, it's not onclick when you use button, it's ServerClick

    or Try with this

    <asp:LinkButton 
        CssClass="lnkSubmit" 
        ID="lnkButton" 
        runat="server">SUBMIT</asp:LinkButton>
    
    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;
    }

    Thank You.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 10:29 AM
  • User665608656 posted

    Hi qsoft_developer,

    According to your requirements, ImageButton does not have the properties to set text.

    You have two alternatives.

    1.As the previous respondent said, using button control instead, you could set the background image in the button's css, and then dynamically assign the text attribute of the button through jquery.

    2. You could choose to use a label control to add text below ImageButton. (This should not be the best alternative.)

    Here is an example about the first alternative:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Button1").val("alert1");
            })
        </script>
          <style  type="text/css">
            .buttonImg{
                background:url(Images/10812677_033641283191_2.jpg) no-repeat;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <asp:Button ID="Button1" runat="server"  CssClass="buttonImg" />
        </form>
    </body>
    </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 5:13 AM

All replies

  • User-1038772411 posted

    Hii qsoft_developer,

    Try with this , I hope this will help you

    <button runat="server" 
      style="background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
      your text here<br/>and some more<br/><br/> and some more ....
      </button>

    To clarify, it's not onclick when you use button, it's ServerClick

    or Try with this

    <asp:LinkButton 
        CssClass="lnkSubmit" 
        ID="lnkButton" 
        runat="server">SUBMIT</asp:LinkButton>
    
    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;
    }

    Thank You.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 10:29 AM
  • User665608656 posted

    Hi qsoft_developer,

    According to your requirements, ImageButton does not have the properties to set text.

    You have two alternatives.

    1.As the previous respondent said, using button control instead, you could set the background image in the button's css, and then dynamically assign the text attribute of the button through jquery.

    2. You could choose to use a label control to add text below ImageButton. (This should not be the best alternative.)

    Here is an example about the first alternative:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Button1").val("alert1");
            })
        </script>
          <style  type="text/css">
            .buttonImg{
                background:url(Images/10812677_033641283191_2.jpg) no-repeat;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <asp:Button ID="Button1" runat="server"  CssClass="buttonImg" />
        </form>
    </body>
    </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 5:13 AM