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):
14311/
24
|
|
|
|
| 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 |
|
|
|
User Comments
Title:
2012 NFL jerseys
Name:
NIKE NFL jerseys
Date:
2012-05-20 11:38:02 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
|
Title:
multiple images
Name:
Marty
Date:
2009-11-16 1:47:16 PM
Comment:
I have multiple images that have differnt class that i am using. All the images need to have rollovers. How can I doo it? Please help
|
Title:
Great one
Name:
Pablo
Date:
2009-06-04 8:23:27 PM
Comment:
It worked!
THANKS!!!!!!!!!!!!!!!!
|
Title:
Image Rollover
Name:
Mark
Date:
2009-04-23 7:03:42 AM
Comment:
are there c# links for the same
|
Title:
Image rollover control
Name:
Neural Trading
Date:
2008-12-30 11:02:23 AM
Comment:
Thanks for your help - works perfectly, learned a lot.
|
Title:
Links Fixed
Name:
Brendan Enrick
Date:
2008-01-28 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:
2008-01-28 8:41:21 AM
Comment:
every link is broken
|
Title:
Download Links appear to be dead
Name:
Larry Runge
Date:
2007-07-17 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:
2006-10-14 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:
2006-09-20 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:
2006-06-06 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:
2006-01-30 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:
2005-10-17 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:
2005-04-03 7:57:25 PM
Comment:
Thx, it is very usefull, but how can you rollover an imagebutton instead of an image?
|
|
Product Spotlight
|
|
|
