Click here to Skip to main content
15,038,237 members
Articles / Web Development / ASP.NET
Posted 12 Jun 2003


43 bookmarked

Cliche RollOvers - Revisted

Rate me:
Please Sign up or sign in to vote.
4.23/5 (7 votes)
17 Jun 20032 min read
Want to use a simple image rollover control?


What makes this code important? It is an easy way to get started writing server controls. The functionality this control provides is relatively simple. Almost every website has some form of rollover effect, implying this control will also be reusable. I wanted a simple design time interface, and an even simpler run time "experience."

Making it easier for programmers: Binding design time interfaces into your controls

Figure 1

In figure 1, there are properties with ellipses buttons off to the right. ImageURL, and HoverImageURL, are properties that use the System.Design namespace (contained within System.Design.dll) to construct a custom "Select Image" dialog, derived ultimately from System.Drawing.Design.UITypeEditor. Binding custom properties to design time developer interfaces is done with the markup before the function itself. In the following code snippet the EditorAttribute is the markup that binds the "Select Image" dialog to the toolbox window.

<Bindable(False), _
    Category("Appearance"), _
    EditorAttribute(GetType(UrlGraphicEditor), _ 
                    GetType(System.Drawing.Design.UITypeEditor)), _
    DefaultValue(""), _
    Description("This is the mouseover image for the surfer.")> _
    Public Property HoverImageUrl()...
        Get ...
        End Get
        Set ...
        End Set 
    End Property

This construct has two great benefits. First we can now show any dialog we wish to the developer by inheriting the System.Drawing.Design.UITypeEditor. This is useful because some information is by nature best expressed in a visual format, such as images or drawings. Second, we now have the ability to pipe visual information into our component in a completely abstracted representation. For example, if the dialog is showing a list of time zones, the control author may have decided to store the offset to GMT. In the past we, component authors, have not had the luxury of this level of abstraction. As a result the "design time experience" was stunted from designer point of view.

The design surface

After dropping this toolbox item onto the design surface, and setting a few properties, this tag is generated by the UI.

<cc1:hoverbutton id=HoverButton1 runat="server" 

Users: even the most challenged of them, can run this control

The user's computer requests the page from the server. The server then generates some pretty client side JavaScript, like so:

<script DEFER = true language= "javascript" type="text/javascript"> <!-- 
    function newRollOver(targetDOmUrlName,URL){ 
        var img = document.images; 
        var i =0;
        // Look Though the DOM images for the one that is named 
        // correctly, then preform the swap.        
        for(i=0; i < img.length; i++)
            if (img[i].name == targetDOmUrlName) img[i].src = URL; 
//--> </script>

When the user hovers his mouse over the image this client-side script is invoked, and the computer flips the image to the alternative URL. Presto - simple functionality wrapped up in a nice clean object.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Jason McBurney
United States United States
Berkeley Grad (B.A. Computer Science) With MBA

Comments and Discussions

GeneralMinor changes Pin
JVMFX26-Feb-05 4:36
MemberJVMFX26-Feb-05 4:36 
GeneralRe: Minor changes Pin
Jason McBurney15-Feb-07 8:22
MemberJason McBurney15-Feb-07 8:22 
Questionscript problem? Pin
mlavallee2-Apr-04 15:55
Membermlavallee2-Apr-04 15:55 
AnswerRe: script problem? Pin
Jason McBurney5-Apr-04 6:18
MemberJason McBurney5-Apr-04 6:18 
QuestionHow do you use it? Pin
Willy161319-Feb-04 6:26
MemberWilly161319-Feb-04 6:26 
GeneralSuggestion Pin
GilbertoBV26-Sep-03 8:17
MemberGilbertoBV26-Sep-03 8:17 
GeneralSubmit button rollover Pin
macupryk4-Aug-03 10:22
Membermacupryk4-Aug-03 10:22 
GeneralRe: Submit button rollover Pin
Jason McBurney4-Aug-03 10:53
MemberJason McBurney4-Aug-03 10:53 
GeneralRe: Submit button rollover Pin
ttrfanatic9-Aug-03 5:10
Memberttrfanatic9-Aug-03 5:10 
GeneralSuggestion Pin
Los Guapos18-Jun-03 15:55
MemberLos Guapos18-Jun-03 15:55 
QuestionProblem with several on a page? Pin
JonTampa17-Jun-03 7:18
MemberJonTampa17-Jun-03 7:18 
AnswerRe: Problem with several on a page? Pin
Jason McBurney18-Jun-03 8:23
MemberJason McBurney18-Jun-03 8:23 
GeneralCode Link Pin
fifi13-Jun-03 6:22
Memberfifi13-Jun-03 6:22 
GeneralRe: Code Link Pin
Jason McBurney13-Jun-03 6:32
MemberJason McBurney13-Jun-03 6:32 
GeneralRe: Code Link Pin
Chris Maunder13-Jun-03 8:06
cofounderChris Maunder13-Jun-03 8:06 
GeneralRe: Code Link Pin
Daniel Turini13-Jun-03 11:08
MemberDaniel Turini13-Jun-03 11:08 
GeneralRe: Code Link Pin
Jason McBurney13-Jun-03 11:47
MemberJason McBurney13-Jun-03 11:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.