Linkbutton with image and text

I ran across the need to have a linkbutton that contained an image and text. A little background... I was creating a file structure-like list in a repeater control.  Each row had to be clickable by the folder name or folder icon; just like in Windows Explorer.

By default, the linkbutton has a Text property but this was of no help for trying to also squeeze in an image too.  But did you know you could do this with a linkbutton:

<asp:LinkButton ID="lbYear" runat="server" CausesValidation="false">

<asp:Image ID="imgFolder" runat="server" ImageUrl="~/images/folder.jpg" />

<%# Container.DataItem %>

</asp:LinkButton>

 

Here you see the LinkButton control acts like a template for the image control and text it needed to display.
Seriously, I know this isn't rocket science but it took me a few minutes to think about how this works because how often do you do this with the linkbutton control?  Enjoy!

Published Wednesday, November 05, 2008 4:06 PM by justinsaraceno
Filed under:

Comments

# re: Linkbutton with image and text

Thursday, November 06, 2008 6:19 AM by Gergely Orosz

I ran into this problem once. I solved it with the following code:

<img src="myImage.jpg" style='cursor:pointer;' onclick='__doPostBack('ctl00$ctl00$rcr$Submit1$_$submitButton','');' /><asp:linkbutton CssClass='hideButton' id='submitButton' runat='server'/>

Sometimes the simplest things are the less obvious it seems. :S Thanks for sharing this!

# re: Linkbutton with image and text

Thursday, November 06, 2008 9:55 AM by james_smith

Simply Awesome!!

Such a *clear* solution

Thanks for sharing :)

# re: Linkbutton with image and text

Friday, November 07, 2008 12:50 AM by james_smith

After reading your post, I was browsing weblogs.asp.net/default.aspx and I noticed "Linkbutton with image and text" on the page which displays user's name along with a user-icon linking to the user's profile.

The element's HTML is

<a href="/members/cibrax.aspx" class="icon_user">cibrax</a>

The image is applied to the link using CSS:-

.icon_user {

background-position:0 -1400px;

padding:2px 0 2px 18px;

background:transparent url(./i/bg_icon_sprite.png) no-repeat scroll 0 0;

}

I was surprised to see that bg_icon_sprite.png contains "multiple icons" inside it!

how do you tell the browser which "icon" to load ?

# re: Linkbutton with image and text

Wednesday, March 04, 2009 12:22 AM by Avi

Thanks for sharing, best wishes

# re: Linkbutton with image and text

Tuesday, September 15, 2009 3:14 PM by andre

anyway to line up the text and the image in side the control?

Leave a Comment

(required) 
(required) 
(optional)
(required)