Creating a RollOver Button Server Control
By Scott Mitchell
Introduction
Recently an individual I am beginning to train in ASP.NET emailed me and asked if there was an easy way to provide
roll-over buttons in an ASP.NET Web page. Roll-over buttons, which you'll find on a number of Web sites, are buttons
that display a default image whenever the mouse is not hovered above the button, and a different, "selected" image
when the mouse is hovered above the button. An example can be seen below (clicking this button will just cause the
Web Form it is placed within to postback, refreshing the page...):
Note that, by default, the button has a dark red background. If, however, you move the mouse over the button, it
changes its background color to a bright red. In this article we'll look at the client-side code needed to create a
roll-over button, and then we'll turn our attention to building a roll-over button server control.
The Basics of Creating a Roll-Over Button
The first step in creating a roll-over button is to create two graphic files: one for the roll-over button's default
state, and one for when the button is hovered over with the mouse cursor. Being a stellar artist, I opened up
Microsoft Paint and spent the next 15 minutes creating these ugly images:
Next, to create the button, you need to create a hyperlink tag (<a>) with the default image as
the contents of the hyperlink. Furthermore, it is important to set the name attribute of the <img>
tag to some unique value, since we'll need to refer to this later in client-side JavaScript code.
For example, I named the default button here home.gif, meaning I would
use the following HTML:
Next, we need to write a bit of client-side JavaScript code. Specifically, we need to create two Image objects
for each roll-over button. A JavaScript Image object preloads a specified image. This allows us to automatically
switch between the default image and the roll-over image without having to have the user download the actual roll-over image
when he or she mouses over the button for the first time. The code to accomplish this is fairly straightforward and looks like this:
<script language="JavaScript">
home_img_out = new Image();
home_img_out.src = "home.gif";
home_img_over = new Image();
home_img_over.src = "home_over.gif";
</script>
Note that the Image object has a src property by which the image's URL is specified.
Our next task at hand is to write the JavaScript function that will switch a button from one image to another. This
function, which we'll name display(), will take in two input parameters. The first specifies the name
attribute of the <img> tag whose image we want to change. The second parameter specifies the name
of the Image object with which we want to replace the specified <img> tag's current
image. The display() function is relatively simple, only taking two lines of code:
The first line (the if statement), checks to make sure the specified Image object exists.
The reason for this check is because the user's Web browser may have only downloaded part of the HTML document when this
display() function gets called. If this is the case, the JavaScript for loading the images might yet
to have been downloaded, in which case trying to access the Image object's src property would
result in a JavaScript error.
If this check passes, however, the specified <img> tag has its src property set to
the src property of the specified Image object.
The last step to creating a roll-over button is to tie the display() function with the mouse entering and leaving
the button. To do this, you need to add onmouseover and onmouseout event handlers to the <a>
tag. These event handlers need to call the display() function, passing in the correct parameters. The
complete HTML for the roll-over button (less the JavaScript examined above), is shown below:
Note that the onmouseover and onmouseout event handlers simply call display()
passing in the name of the <img> tag and the name of the Image object to
display. To see the complete source code all in one place, refer to the live demo.
Creating a Roll-Over Button Server Control
Doing a bit of research I found an existing (free) roll-over button control on MetaBuilders.com called
RollOverLink. This server control displays a
roll-over button that, when clicked, whisks the user to a specified URL, much like the ASP.NET HyperLink Web
control. (In fact, the RollOverLink control is derived from the System.Web.UI.WebControls.HyperLink class.)
While this control is great if you need hyperlink-like behavior with a Web control, there are times where might want
a roll-over button to behave like a Button Web control - that is, clicking the button causes a postback rather
than taking the user to a specified URL. Since I could not find such a control online, I decided to create my own.
(The remainder of the article focuses on building the roll-over button server control, one that causes a postback; if you
just want the roll-over button to send the user to a specified URL when clicked, I encourage you to utilize
RollOverLink.)
The beautiful thing about object-oriented programming is that it encourages reuse. The whole idea behind inheritance
is that you can build classes that provide some base functionality, and then create other classes that extend
the functionality present in the base classes. (If you are unfamiliar with object-oriented programming or inheritance,
I invite you to read Ian Stalling's Using Object-Orientation in
ASP.NET: Inheritance.) Realize that there is already an ASP.NET Web control that does almost exactly what we want our
roll-over button to do: the LinkButton control.
The LinkButton control renders as a hyperlink. When clicked, the hyperlink causes the page to postback (as opposed to
taking the user to a specified URL). Therefore, all we need to do is create a control that derives from LinkButton,
add properties for the default image URL and the roll-over image URL, have the control emit a bit of client-side
script, and then (finally), override the RenderContents() method so that our roll-over button generates
the HTML for an <img> tag inside the <a> tag (as opposed to merely displaying
the Text property, which is what the LinkButton does).
Let's examine each of these steps individually. Before we do so, though, let's first take a look at the shell of the
class for our server control:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
namespace RolloverButton
{
[ToolboxData("<{0}:RollOver runat=server></{0}:RollOver>")]
public class RollOver : System.Web.UI.WebControls.LinkButton
{
}
}
Here you can see that the class is derived from System.Web.UI.WebControls.LinkButton. Also note that
the class's name is RollOver, and the namespace is RolloverButton.
In Part 2 we'll examine the steps needed to create the server control in detail.
