Button with image and text

Question

Possible Duplicate:
Text on an Image button in c# asp.net 3.5

I want a asp.net button with text on left and image on right

Answer 1

I'm not sure if there are any asp controls that allow you to do this (but I could be wrong). What you will want to fool around with is possibly divs and their onclick events. Then you can do something like onclick="Javascript:this.form.submit();". You will be able to size the div how you please and insert what you want (in your case text and an image).

Edit: Then in the css you could also add #mydiv:hover { cursor: pointer; } To get the hand icon when users move their cursor over the div.

But it looks like gage provided a link to someones solution :P Good luck

Answer 2

Here's one I wrote:

public class WebImageButton : LinkButton, IButtonControl
{
    protected override void OnPreRender(EventArgs e)
    {
        if (!this.DesignMode)
        {
            // Apply the image
            if (this.Image.Length > 0)
            {
                this.Style.Add("background-image", "url(" + this.Image + ")");
                this.Style.Add("background-repeat", "no-repeat");
                this.Style.Add("background-position", this.ImageHorizontalOffset + " " + this.ImageVerticalOffset);
            }
        }

        base.OnPreRender(e);
    }

    [DescriptionAttribute("The path to the default image to be displayed.")]
    public string Image
    {
        get
        {
            if (_image == null)
            {
                return string.Empty;
            }
            return _image;
        }
        set
        {
            _image = value;
        }
    }
    private string _image;

    [DescriptionAttribute("The unit to offset the image by horizontally.")]
    public string ImageHorizontalOffset
    {
        get
        {
            return _imageHorizontalOffset;
        }
        set
        {
            _imageHorizontalOffset = value;
        }
    }
    private string _imageHorizontalOffset = "0px";

    [DescriptionAttribute("The unit to offset the image by vertically.")]
    public string ImageVerticalOffset
    {
        get
        {
            return _imageVerticalOffset;
        }
        set
        {
            _imageVerticalOffset = value;
        }
    }
    private string _imageVerticalOffset = "center";

}   

Then the CSS that accompanies it:

.ImageButton
{
    background:#666;
    border:solid 1px #000;
    color:#FFF;
    font-size:10pt;
    font-weight:bold;
    padding:4px;
    text-align:center;
    cursor:hand;
}

And an example of its use:

<ctrl:WebImageButton ID="WebImageButton1" runat="server"
    OnClick="WebImageButton1_Click" CssClass="ImageButton" Text="Click me" 
    ImageHorizontalOffset="4px" />

Answer 3

You could use CSS to apply the image to the background of the input element. Have a read up in the background-image CSS method:

http://www.w3schools.com/css/pr_background-image.asp