A rollover image user control
page 1 of 1
Published: 05 Dec 2003
Unedited - Community Contributed
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): 15745/ 14

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
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 10:05:09 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search