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 5, 2008 4:06 PM by justinsaraceno
Filed under:

Comments

# re: Linkbutton with image and text

Thursday, November 6, 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 6, 2008 9:55 AM by james_smith

Simply Awesome!!

Such a *clear* solution

Thanks for sharing :)

# re: Linkbutton with image and text

Friday, November 7, 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 4, 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?

# re: Linkbutton with image and text

Tuesday, April 13, 2010 8:35 AM by Naeem

awsmazing work !!!

really solved my problem

# re: Linkbutton with image and text

Tuesday, June 15, 2010 10:05 AM by Karthik

Thanks for this post! I had this requirement today, googled it, and there it was the first link!!! Amazing, thanks again!!!

# re: Linkbutton with image and text

Thursday, February 10, 2011 7:44 AM by ROMZ

Hi,

 That was a really nice solution. Thanks..!!

# re: Linkbutton with image and text

Friday, March 18, 2011 12:18 AM by Nguyen Nam

It's not resolve my problems.it display a Image at left and a text at right

# re: Linkbutton with image and text

Saturday, May 28, 2011 1:04 AM by weblogs.asp.net

Linkbutton with image and text.. Smashing :)

# re: Linkbutton with image and text

Saturday, June 4, 2011 11:33 AM by Amit Mula

wow...amazing solution...this is what i was lookig for.

Thanks :)

# re: Linkbutton with image and text

Monday, June 13, 2011 6:15 PM by ruben costa

how can I change text of link without hide image?

I have a link with the name "test". if I do linkbutton1.Text="test2" the image disapear..! can you help me?

# re: Linkbutton with image and text

Wednesday, July 20, 2011 1:50 AM by alex talarico

very clever - great post.

# re: Linkbutton with image and text

Saturday, September 10, 2011 12:27 PM by jialou

Great Idea! If you need to do it in code, you can:

button.Controls.Add( new Image() { ImageUrl = url, ID = "myImage" });

# re: Linkbutton with image and text

Wednesday, May 23, 2012 5:11 AM by Kodeeswaran

Good work. this helped me..

Thanks

# re: Linkbutton with image and text

Friday, August 10, 2012 10:17 AM by Crol

Excellent, example works great!

# re: Linkbutton with image and text

Monday, August 13, 2012 6:44 AM by Uttam

Hi all, I m using this inside a update panel.I m setting values for link button from Linkbutton.attributes property.The values are not pertaining after post back.Please help me as i m stuck with this for quiet a long time.

Thanks in advance

# re: Linkbutton with image and text

Thursday, September 13, 2012 5:40 AM by nitin

thanks a lot.its really work

# re: Linkbutton with image and text

Sunday, September 16, 2012 5:35 AM by Nitin Nayyar

Thanks,

It really helped.

Thanks,

Nitin Nayyar

# re: Linkbutton with image and text

Monday, October 15, 2012 10:52 AM by Holmes

How would you go about this? Would you just take the shot and stay

happy with the outcome? Or could you study the scene and need more from it?

Electronic Light Meters, within cameras have become sensitive to

light, simply because of this that they can display for the photographer, what settings to use.

No worries if you just aren't photography savvy with there being a lot of features that work automatically, and you'll be

able to take great shots. The Manual SLR enables you to work for your photograph and you'll learn how to obtain it just right.

# re: Linkbutton with image and text

Wednesday, December 19, 2012 8:46 AM by Jay Vengs

Hi bro thanx for the simple and useful stuff. It really helped me i was googling for about 2 days with no success.

Thanks again GOD Bless you.

# re: Linkbutton with image and text

Tuesday, January 8, 2013 6:58 AM by Mahesh

Excellent work....

# re: Linkbutton with image and text

Wednesday, January 23, 2013 3:04 PM by Holbrook

The next time I read a blog, I hope that it does not disappoint me as much as

this one. I mean, Yes, it was my choice to read, nonetheless I truly thought you'd have something helpful to say. All I hear is a bunch of whining about something that you can fix if you weren't

too busy looking for attention.

# re: Linkbutton with image and text

Thursday, January 24, 2013 12:39 AM by Bravo

The very next time I read a blog, Hopefully it won't fail me just as much as this particular one. I mean, Yes, it was my choice to read through, however I really believed you would probably have something useful to say. All I hear is a bunch of whining about something you could possibly fix if you were not too busy searching for attention.

# re: Linkbutton with image and text

Saturday, March 2, 2013 10:36 AM by Stacy

Exceptional post however , I was wanting to know if you could write a litte more on this subject?

I'd be very thankful if you could elaborate a little bit more. Bless you!

# re: Linkbutton with image and text

Tuesday, April 16, 2013 8:35 AM by calojo

excellent great contribution

# re: Linkbutton with image and text

Saturday, April 20, 2013 5:59 PM by Espinal

Woah! I'm really loving the template/theme of this site. It's

simple, yet effective. A lot of times it's difficult to get that "perfect balance" between superb usability and appearance. I must say that you've done a

great job with this. Also, the blog loads super quick for me on Internet explorer.

Exceptional Blog!

# re: Linkbutton with image and text

Thursday, October 31, 2013 7:28 AM by AnpaYbIugD

TWb90p Muchos Gracias for your blog.Really thank you! Great.

# re: Linkbutton with image and text

Sunday, December 15, 2013 5:07 AM by iQsVGJOYCacEeQDXFwi

vljF0q Really enjoyed this article.Much thanks again. Fantastic.

# re: Linkbutton with image and text

Thursday, January 16, 2014 3:56 PM by hiXtcOvFUCurdP

2BER6m A round of applause for your blog.Really thank you! Great.

# re: Linkbutton with image and text

Thursday, January 30, 2014 7:03 PM by kHohobJVPxQNPEmxhu

UiZOXj Major thankies for the post.Really thank you! Much obliged.

# re: Linkbutton with image and text

Friday, February 28, 2014 10:42 AM by edEhsSDQpft

P4TDyy Im obliged for the blog.Really looking forward to read more. Really Cool.

Leave a Comment

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