Wanting to use an image with text in Html.ActionLink

Question

I am using the following:

<img src="../../Content/Images/lock_16.gif" />
@Html.ActionLink("Register", 
   "Register", 
   "Users", 
   null, 
   new { title = "Register your ID", rel = "nofollow" 
})

What I would like is for the lock image to appear inside of the <a> </a> so it is clickable and not before it. I already use (and change color on hover) of a background image so its not possible for me to use the background-image property to display the image.

Can anyone think of a way that I can set the image so that it will show before the text and still be clickable. Hopefully I can find a way that still allows me to use the MVC Html.ActionLink.

You might want to rephrase your question. What do you mean by "appear inside"? Do you mean you want both the image and text to be clickable? — nthpixel, Aug 04 '11 at 07:41
Sorry if I wasn't clear. Yes I would like the image and text to appear inside the and both be clickable. — Marie, Aug 04 '11 at 07:45
duplicate of [Image equivalent of ActionLink in ASP.NET MVC](http://stackoverflow.com/questions/210711/image-equivalent-of-actionlink-in-asp-net-mvc) — Eranga, Aug 04 '11 at 07:50

archil · Accepted Answer · 2011-08-04T07:57:17.947

4

Html helpers in ASP.NET MVC should be used when they simplify writing code, not always. Plain html would go way better in your case

<a href="@Url.Action("Register", "Users")" title="Register Your ID", rel="nofollow">
     Register <img src="@Url.Content("~/Content/Images/lock_16.gif")" />
</a>

Note that link address is still generated dynamically, using UrlHelper.Action method. This way, you do not lose link dependency to your route configuration. Also, as Nicholas mentioned, image source should be generated via Url.Content helper.

edited Aug 04 '11 at 07:57

answered Aug 04 '11 at 07:49

archil

39,013
7
65
82

3

You should also use – Nicholas Murray Aug 04 '11 at 07:55
I think ur ans is better than Mark's ans http://stackoverflow.com/questions/596444/html-actionlink-as-a-button-or-an-image-not-a-link – Dhwani Aug 05 '14 at 10:52

score 0 · Answer 2 · edited Apr 25 '16 at 11:41

0

You may use something like -

@Html.ActionLink("link Name", "Action Method", "Controller", new { style = "background-image:url('.././Images/imageName.png')" },null)

edited Apr 25 '16 at 11:41

ShaileshDev

1,086
13
16

answered Mar 13 '14 at 09:46

bunny hop

3
2

score 0 · Answer 3 · edited Jun 29 '16 at 09:59

0

@Html.ActionLink("link Name", "Action Method", "Controller", 
   new { style = "background-image:url('.././Images/imageName.png')" },
   null)

edited Jun 29 '16 at 09:59

Alexei - check Codidact

22,016
16
145
164

answered Jun 29 '16 at 09:53

Vijay

1

Although this code may be help to solve the problem, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight Jun 29 '16 at 11:49

Wanting to use an image with text in Html.ActionLink

3 Answers3