Setting image swap on your asp.NET Image Controls - Part 2

In part 1 of this article series, I showed you how to set an image rollover in your ASP.NET (2.0) app with asp.NET HyperLink and Image controls. It's a code behind solution that writes all the javascript for you, making you much more likely to use image rollovers, rather than make them "phase two" of any given project.

As promised, this article shows you how to make it more functional by wrapping the method in a class which is reusable and accessible across your asp.NET application(s).

I'll set up a very simple class in my namespace: Web.Classes.

namespace Web.Classes

{



public class Common

{



public Common() {



}



public static void setMouseOver(HyperLink lnkControl, System.Web.UI.WebControls.Image imgControl, string imgPath, string imgPathOver)

{

lnkControl.Attributes.Add("onmouseover", "document.getElementById('" + imgControl.ClientID + "').src='" + imgPathOver + "';");

lnkControl.Attributes.Add("onmouseout", "document.getElementById('" + imgControl.ClientID + "').src='" + imgPath + "';");

}

}

}

One thing you might notice (if for no other reason than it's highlighted in orange), is that I fully qualified the System.Web.UI.WebControls.Image which shows up as an argument in my method. I've noticed that even when I declare the WebControls Namespace at the top, the compiler can potentially still throw an error due to a conflict with System.Drawing.Image. For simplicity, I didn't use a shorthand in my using statement to solve this, but that's certainly a good option.

Finally, instead of reinventing the wheel on each codebehind, it is not as simple as calling Common.setMouseOver() and providing the appropriate arguments like this:

if(!Page.IsPostBack)
{

Common.setMouseOver(lnkLink1, imgLink1, "/Images/my_image.png", "/Images/my_image_over.png");
}

My intent with this brief series of articles was to show a simple way of implementing rollover images on your asp.NET pages.

Setting image swap on your asp.NET Image Controls

In this article, I wanted to archive a clean and quick way of adding mouse rollover image swapping to your asp.net (2.0) forms. Before you wonder why you wasted the last 20 seconds of your life, I'll show you in part 2 how to wrap it up into a class to make it more object oriented by developing a reusable mouse rollover control.

It would be really great if the .net HyperLink control simply had an ImageRolloverUrl property, to go along with its ImageUrl property (maybe in 3.0?). At that point, we'd be done, and you'd be back to reading about my cat (I don't own a cat, but somehow writing about your black lab seems even lamer).

Moving on, since we'll have to wrap our HyperLink control around an Image control, you'll notice I don't even set the ImageUrl property of HyperLink. Therefore, it will look like this:

<asp:HyperLink id="lnkPage1" runat="server" >
<asp:Image id="imgMyImage" runat="server" ImageUrl="~/App_Themes/Default/Images/my_image.png" />
</asp:HyperLink>

in the code behind:

string imgPath = "~/images/yourimage.png";
string imgPathOver = "~/images/yourimage_over.png";

lnkControl.Attributes.Add("onmouseover", "document.getElementById('" + imgControl.ClientID + "').src='" + imgPathOver + "';");

lnkControl.Attributes.Add("onmouseout", "document.getElementById('" + imgControl.ClientID + "').src='" + imgPath + "';");

So, pretty simle in all, though it's still just a little more code than a developer might be willing to write for each image link. That's why I'll show you in part 2 how I chose to wrap this in a Class for reusibility across your application(s).