Click here to Skip to main content
12,894,200 members (55,190 online)
Click here to Skip to main content
Add your own
alternative version


44 bookmarked
Posted 12 Jun 2003

Cliche RollOvers - Revisted

, 17 Jun 2003
Rate this:
Please Sign up or sign in to vote.
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

You may also be interested in...

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
Gilberto Bermudez26-Sep-03 8:17
sussGilberto Bermudez26-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
Greg Ennis18-Jun-03 15:55
memberGreg Ennis18-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
adminChris 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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 18 Jun 2003
Article Copyright 2003 by Jason McBurney
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid