Button with image and text.

Question

Possible duplicate:
Text on image button in c # asp.net 3.5

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

Answer 1

Here 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 attached CSS:

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

You can use CSS to apply the image to the background of the input element. Read in the background-image CSS method:

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

Answer 3

, - asp, ( ). , , - , , divs onclick. - onclick="Javascript:this.form.submit();". div , ( ).

: css #mydiv:hover { cursor: pointer; }. , div.

, gage someones: P