Click here to Skip to main content
Click here to Skip to main content

MVC 3 Helper for Hover Images...

By , 14 Feb 2012
Rate this:
Please Sign up or sign in to vote.
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";
}
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:
 
https://skydrive.live.com/redir.aspx?cid=c80cb697c4b0eb01&resid=C80CB697C4B0EB01!1447&parid=C80CB697C4B0EB01!1446&authkey=!AJ4-nyhDI-I2ur0[^]

License

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

About the Author

desalbres
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.
Follow on   Twitter

Comments and Discussions

 
QuestionMVC3 Image Button Hover Helper -- How do I add the controller PingroupVal Bee5-Dec-12 11:38 
AnswerRe: MVC3 Image Button Hover Helper -- How do I add the controller Pinmemberdesalbres12-Jan-13 11:20 
QuestionRough PinmemberCorey Fournier13-Feb-12 9:35 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 14 Feb 2012
Article Copyright 2012 by desalbres
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid