Click here to Skip to main content
15,846,899 members
Articles / Programming Languages / C#

MVC 3 Helper for Hover Images...

Rate me:
Please Sign up or sign in to vote.
4.00/5 (1 vote)
14 Feb 2012CPOL 35.8K   1   3
A simple MVC 3 Helper for handling Hover Images...
In this post, I will talk about something that I haven't found on the internet, which is quite simple to do, which is an MVC Helper for creating a Hover image button...

If you are a professional developer and work in a team, you must have people which make the graphical stuff of your website, because most developers (like me) just don't like it, it's just a completely separate job.

This code assumes that you already understand MVC.

So here are my images, one named OK.png and the other OK_Hover.png, that are located on the Content/Images/Buttons folder.

Now what I want do do is to use my helper (which appears on listing 1), to use it in my razor page, and that upon a click will redirect me to the corresponding view.

So in my index.cstml, I have:

@using HoverImageHelper.Helpers;
 ViewBag.Title = "Index";

@Html.ImageButton("OK", "OK")

So the first parameter corresponds to my PNG file, and the second to my action.

Listing 1
/// This function creates an image button with a hover, based on a an image name (must be .PNG)
/// and its corresponding hover image
public static MvcHtmlString ImageButton
(this HtmlHelper helper, string imageName, string actionName, object routeValues)
 //Gets the action name and routes
 var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
 var url = urlHelper.Action(actionName, routeValues);
 //Creates the image tag
 var imgTag = new TagBuilder("img");
 var imageUrl = string.Format("/Content/Images/{0}.png", imageName);
 imgTag.Attributes.Add("src", imageUrl);
 imgTag.Attributes.Add("onmouseover", "this.src='" + imageUrl.Replace(".", "_hover.") + "'");
 imgTag.Attributes.Add("onmouseout", "this.src='" + imageUrl + "'");
 imgTag.Attributes.Add("border", "0");
 //Creates the link tag
 TagBuilder imglink = new TagBuilder("a");
 imglink.MergeAttribute("href", url);
 imglink.InnerHtml = imgTag.ToString(TagRenderMode.SelfClosing);
 return MvcHtmlString.Create(imglink.ToString());

And a corresponding overload (which I use on this example):

Listing 2
public static MvcHtmlString ImageButton(this HtmlHelper helper, string imageName, string actionName)
 return ImageButton(helper, imageName, actionName, null);

Happy programming!!!

You can grab the full code here:!1447&parid=C80CB697C4B0EB01!1446&authkey=!AJ4-nyhDI-I2ur0[^]


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior) Messages S.A.S
France France
I am Web Developer at Messages, a printing company in Toulouse, France. I am particularly interested about Blazor, but my primary development platform at work is ASP.NET MVC with C#. I have 15 years experience in developing software, always using Microsoft Technologies.

Comments and Discussions

QuestionMVC3 Image Button Hover Helper -- How do I add the controller Pin
Val Bee5-Dec-12 12:38
Val Bee5-Dec-12 12:38 
AnswerRe: MVC3 Image Button Hover Helper -- How do I add the controller Pin
raphadesa12-Jan-13 12:20
raphadesa12-Jan-13 12:20 
QuestionRough Pin
Corey Fournier13-Feb-12 10:35
Corey Fournier13-Feb-12 10:35 
The article is a bit rough. Could you add a screen shot? Also can you actually upload the code to the project?

It sounds really great by the way, with out a screen shot i am left to guess exactly what it does and how it looks.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.