Creating a RollOver Button Server Control, Part 2By Scott Mitchell
The first step in creating our roll-over button server control is to add two properties (in addition to the properties already present in the LinkButton Web control):
ImageUrl- the URL of the default image.
RollOverImageUrl- the URL of the image to display when the button is "rolled-over" (i.e., the mouse cursor is over the button).
The code to add these two properties can be seen below:
This code creates two public properties. The get accessor checks to find the image in the ViewState. If it cannot, it returns the default value (an empty string). The set accessor simply assigns the appropriate ViewState variable the value specified by the user. Realize that it is vital to store the value in the ViewState in order to allow changes to these properties programmatically at various points in the page lifecycle. (For full details, I heartily recommend Developing Microsoft ASP.NET Server Controls and Components.)
Imageobjects needs to happen once for every roll-over button.
The following code illustrates using the
Page.RegisterClientScriptBlock() method to add the appropriate
A thorough discussion of the
Page.RegisterClientScriptBlock() is a bit beyond the scope of this article.
For a good, detailed discussion on emitting client-side code from an ASP.NET server control be sure to read an earlier
article of mine: Injecting
Client-Side Script from an ASP.NET Server Control.
One thing to note is that in the control I use the function name
rolloverServerControl_display() as opposed
rolloverServerControl_display() was much less likely.
Rendering the Image
The final task is to override the LinkButton's
RenderContentsmethod. Essentially, if the
ImageUrlproperty is set, we want to have the inner contents of our roll-over button rendered as an
<img>tag. If, however, the
ImageUrlproperty is not set, we can just have the roll-over button render like the LinkButton would (by the
Textproperty). This is accomplished with the following code:
This method creates a new Image Web control and sets its various properties: the
name attribute (essential
AlternateText, and so on. Finally, it
renders itself to the
HtmlTextWriter. If, however, no
ImageUrl property is specified, the
RenderContents() method is invoked instead.
A live demo is available to show the roll-over button in action.
Using the Roll-Over Button Server Control in an ASP.NET Web Page
In order to start using this roll-over button in an ASP.NET Web page you need to download the assembly at the end of this article. Copy this assembly to your Web application's
/bindirectory. (Alternatively you can download the source code and compile the assembly yourself...) Then, to use it in an ASP.NET Web page, add the following to the top of the Web page:
You can then use the control in your ASP.NET Web page by adding:
If you are using Visual Studio .NET, first add the assembly to the Web project's References folder. Then, add the roll-over button to the Toolbox by right-clicking on the Toolbox and choosing, Add/Remove Item from Toolbox. Click browse and locate the assembly and click OK. Once you have added the roll-over button assembly you can add the roll-over button to an ASP.NET Web page by simply dragging and dropping the roll-over icon from the Toolbox onto the Designer.
In this article we saw how to create a roll-over button that, when clicked, causes a postback, just like the LinkButton. Clearly creating this server control was a snap due to inheritance since we were able to utilize the built-in functionality of the LinkButton Web control. All we had to do was add a couple of properties, emit some client-side script, and override the LinkButton's