Click here to Skip to main content
15,846,342 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 

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.