Button with image and text [duplicate] - asp.net

Question

This question already has answers here:
Closed 12 years ago.
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

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 2

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

Answer 3

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