Menu User Control with Rollovers in ASP.NET

Many people have asked about using Rollover button images in Forums and ListServs lately. Therefore, this tutorial will attempt to explain how to create a menu system as a user control, using Javascript Rollover images. If you’ve read any of the tutorials on this site before, you know how many times they’ve started out with something like, “This is not going to be as hard as it sounds”. Well, this time is no exception.

If you’ve ever used an HTML/Javascript solution for creating Javascript Rollover Buttons, you know how complicated it can get if you’re not using an editor that will help you do it. Technically, the way that is about to be explained uses the same Javascript principles, but in a much less complex way.

First, we start out with creating a new User Control. Call it menu.ascx. You can create the visual portion anyway you want it – vertically or horizontally, in a Table or not. However, today, we’re creating one in an HTML table, horizontally. In our new menu, there will be three buttons, Art, Contact and Web Design. Keep in mind here, that, for each of these three menu buttons, you will need to create 3 buttons for the different ‘States’ of the buttons (basic, OnMouseOver, OnMouseDown). As you can see, at this point, this tutorial is going a little bit further than just having a ‘Hover’ or ‘OnMouseOver’ state. the ‘OnMouseDown’ state is for two things – when the button is clicked, and defining a button for when the page relating to the button is the current open page.

To enable the Current Page concept, we need to use the old, tried and true Request.ServerVariables(“SCRIPT_NAME”) method. Just inside the <Script> Tag, we add this line:

Dim sScript as String

Then, the first line, inside the Page_Load event of the User Control is:

sScript=request.ServerVariables(“SCRIPT_NAME”)

This assigns the Current Page name to the variable ‘sScript‘. In this case, we’re going to use the ImageButton ASP.Net Server control for each of the visible buttons in the menu. You will probably ask yourself, “Why not use a HyperLink control?”. The answer is fairly simple. I decided to go this way, because, to be perfectly honest, I was not able to get all three states working with the HyperLink Control.

The ImageButton Control has an ImageURL property (defining the path of the Image for the button), which we will NOT set inside the control itself because we’ll need to check the name of the Current Page before we assign that (in the Page_Load event). The following code snippet will need to be copied/pasted for each ImageButton Control you have in your menu, changing the IDs for each ImageButton.

	if Trim(sScript)="/ibtest.aspx" then
		IB1.ImageURL="art3.gif"
	else
		IB1.ImageURL="art.gif"
		IB1.Attributes.Add("onMouseOut", "this.src = 'art.gif';")
		IB1.Attributes.Add("onMouseOver", "this.src = 'art2.gif';")
		IB1.Attributes.Add("onMouseDown", "this.src = 'art3.gif';")
	end if

As you can see, we’re adding events to the Attributes collection of the ImageButton. This adds Javascript events to use Client Side for each of the ImageButtons. First, it checks for the Current Page Name, replacing the image with a different basic image, depending on the name of the page.

We could use more compact coding methods here, but doing it this way (copying/pasting for each ImageButton) shows it more distinctly for most programming levels .

Then, there is one more subroutine that needs to be added, in order to get the redirection we need for the HyperLink-type action. Here, notice the sub routine has two parameters we are going to look at :
Source as Object E as ImageClickEventArgs The first parameter, ‘Source’, we will need to check the ID of the actual ImageButton being clicked. As far as the ‘E’ parameter goes – notice it says “as ImageClickEventArgs” This is what is needed to recognize the click event for ImageButtons. Here’s the subroutine:

Sub doImage(Source as Object, E as ImageClickEventArgs)
	Select Case Source.ID
		Case "IB1"
			response.Redirect("ibtest.aspx")
		Case "IB2"
			response.Redirect("another.aspx")
		Case "IB3"
			response.Redirect("third.aspx")
	End Select
End Sub

The only thing left, at this point, is the Display code for the ImageButtons, inside the HTML Table:

<div align="center">
<Form id="form1" runat="server">
<table  cellpadding="0" cellspacing="0">
	<tr>
		<td align="Center" valign="Top">
			<asp:ImageButton
				id="IB1"
				onclick="doImage"
				runat="server" />
		</td>
		<td align="Center" valign="Top">
			<asp:ImageButton
				id="IB2"
				onclick="doImage"
				runat="server" />
		</td>
		<td align="Center" valign="Top">
			<asp:ImageButton
				id="IB3"
				onclick="doImage"
				runat="server" />
		</td>
	</tr>
</table>
</Form>
<hr>
<asp:Label ID="label1"  runat="server" /><hr>
</div>

If you want to download the files to duplicate this on your system, Click here for the User Menu User Control Files. (Naturally, since this example assumes you are using the sample from the root directory of your website, with all the images there too, you would most likely want to pay attentiion to the paths of the images and the file names and put them in a subdirectory/folder on your system, so they wouldn’t be in the root).

As I told you at the beginning, compared to the hoops you’d need to jump through hand-coding Javascript version of this, it is, indeed, fairly simple. So – now the rest is up to you – Have Fun!

Related Posts:

• No Related Posts