How to create a link that contains an image & text?

Question

I need to create a link for an ASP.NET page that has an image & text, which when clicked will trigger an event on the webserver.

This is what the link should look like:

This is the HTML for what the link would look like if I wasn't working with ASP.NET:

<a id='PdfLink' href='#'>
    <img src="App_Themes/.../Images/PDF.gif" alt="Click for fact sheet PDF"/>
    <span>Latest Performance</span>
</a>

The problem with this is that I want to be able to click this and trigger an server-side event, but I don't know if I can do that with plain old HTML controls.

With ASP.NET I can see that there are various controls such as ImageButton & HyperLink but I don't see how I can have a Hyperlink & an ImageButton as part of the same clickable control.

What's the best way for me to get a link similar to the image that is bound to server-side functionality?

Answer 1

I wouldn't do this by using a mixture of controls.

I would use a <asp:LinkButton> control

<asp:LinkButton id="LinkButton1" runat="server" OnClick="ButtonClick_Event" CssClass="latest-performance">Latest Performance</asp:LinkButton>

Then I would use the CssClass "latest-performance" to style up the link.

e.g.

.latest-performance{
     display: block;
     padding-left: 20px;
     background: url(url-to-the-pdf-icon) no-repeat left center;
}

You will have to tweek the style to fit with what you need, but this will basically look exactly the same as what you need. It also keeps your code clean, and separates out the style.

Answer 2

You can do like..

<asp:LinkButton ID="LinkButton1" runat="server" 
Text="<img src='App_Themes/.../Images/PDF.gif' /> PdfLink"></asp:LinkButton>