Click here to Skip to main content
13,094,679 members (69,016 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 13 Feb 2012

MVC 3 Helper for Hover Images...

, 14 Feb 2012
Rate this:
Please Sign up or sign in to vote.
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)


About the Author

Software Developer (Senior) Messages S.A.S
France France
I am Web Developer at Messages, a printing company in Toulouse, France. I particularly enjoy ASP.NET MVC, JQuery, Silverlight...I have over 10 years experience in developing software, always using Microsoft Technologies.

You may also be interested in...

Comments and Discussions

QuestionMVC3 Image Button Hover Helper -- How do I add the controller Pin
Val Bee5-Dec-12 11:38
groupVal Bee5-Dec-12 11:38 
AnswerRe: MVC3 Image Button Hover Helper -- How do I add the controller Pin
desalbres12-Jan-13 11:20
memberdesalbres12-Jan-13 11:20 
QuestionRough Pin
Corey Fournier13-Feb-12 9:35
memberCorey Fournier13-Feb-12 9: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170813.1 | Last Updated 14 Feb 2012
Article Copyright 2012 by rafitot74
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid