Published:
05 Dec 2003
|
Abstract
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 .. |
 |
by Chris Garrett
Feedback
|
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days):
28826/
227
|
|
|
|
| A rollover image user control |
A rollover image user control by Chris Garrett
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 |
|
|
|
|
Article Feedback
User Comments
Title:
Links Fixed
Name:
Brendan Enrick
Date:
1/28/2008 10:42:48 AM
Comment:
Thanks Kudor. I have fixed all of the links. Enjoy!
|
Title:
all the links are broken
Name:
kudor gyozo
Date:
1/28/2008 8:41:21 AM
Comment:
every link is broken
|
Title:
Download Links appear to be dead
Name:
Larry Runge
Date:
7/17/2007 1:55:57 PM
Comment:
I tried downloading the C# files just above and the links appear dead.
|
Title:
A rollover image user control
Name:
Maheshwar Singh
Date:
10/14/2006 7:13:37 AM
Comment:
Thanks All of the code are working great,Thanks a lot
can you also get me how to upload a video file into Sql Server database
|
Title:
Rollover problem
Name:
kongwk
Date:
9/20/2006 3:36:28 AM
Comment:
Thanks...Everything are working in master page(asp.net 2.0) but when I click the link to other page if cant get the rollover image :( How can I get the image src?
|
Title:
Rollover image
Name:
Mithun Ratnakumar
Date:
6/6/2006 5:55:12 AM
Comment:
First of all, I cant miss to say thanks to whoever provided the above codes. It works & I have implemeted in my project. Keep putting more codes for us. Thank you.
|
Title:
Can you add this user control to the toolbox in visual web express
Name:
roly
Date:
1/30/2006 8:55:33 PM
Comment:
I wan to know if you can add this user control to the visual web developer express, so it can be implemented with ease?
roly
|
Title:
Thanks
Name:
dlevent
Date:
10/17/2005 9:56:49 AM
Comment:
Thanks it is working :-) and i wonder question in the previous comment (wim posted). how an imagebutton can be rollovered.
thanks again.
|
Title:
rollover imagebutton
Name:
wim
Date:
4/3/2005 7:57:25 PM
Comment:
Thx, it is very usefull, but how can you rollover an imagebutton instead of an image?
|
|
Product Spotlight
|
|
|
