A common user interface task for web developers and designers is to create buttons on a page that react when you roll your mouse pointer over them. This is a simple thing to do, but can cause a lot of "copy and paste" reuse. This project shows how to do it the asp.net way ..

To achieve a rollover effect (swap the image when the mouse is over) you need a hyperlink, an image and some client side script. This is very easy to do by using response.write, but to make it more "ASP.NET webforms" we use server controls.

View page source
/chrisg/tools/view-rollovers.aspx.aspx
/chrisg/tools/view-rollovers.aspx.vb.aspx

In the ASPX file we set up our HyperLink and Image. Now check out the codebehind .vb file where we set the Image and HyperLink URLs. We also set two attributes to the HyperLink of onMouseOver and onMouseOut. These are our client side scripts.

See it in action
/chrisg/tools/Rollovers.aspx

User Control

We have our rollover working but it is not very reusable. The following code puts the project inside a user control allowing us to set the image src and urls as properties.

view control source
/chrisg/tools/view-rolloverimage.ascx.aspx
/chrisg/tools/view-rolloverimage.ascx.vb.aspx

The following ASPX embeds the control into a page, setting the various properties.

View test page source
/chrisg/tools/view-testRollover.aspx.aspx

See it in action
/chrisg/tools/testRollover.aspx

A very simple control, but it demonstrates how to neatly add client side interface logic into a page.

Download

/chrisg/tools/download.asp?file=rollovers.aspx
/chrisg/tools/download.asp?file=rollovers.aspx.vb

/chrisg/tools/download.asp?file=rolloverimage.ascx
/chrisg/tools/download.asp?file=rolloverimage.ascx.vb

/chrisg/tools/download.asp?file=testRollover.aspx