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.

Continues…