Click here to Skip to main content
Click here to Skip to main content

Cliche RollOvers - Revisted

, 17 Jun 2003
Rate this:
Please Sign up or sign in to vote.
Want to use a simple image rollover control?

Introduction

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" 
        HoverImageUrl="logoBW225x72.gif" 
        ImageUrl="logo225x72.gif" 
        NavagationURL="WebForm1.aspx" 
        BorderWidth="0px"></cc1:HoverButton>

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.

License

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

Share

About the Author

Jason McBurney

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

Comments and Discussions

 
GeneralMinor changes PinmemberJVMFX26-Feb-05 5:36 
GeneralRe: Minor changes PinmemberJason McBurney15-Feb-07 9:22 
Questionscript problem? Pinmembermlavallee2-Apr-04 16:55 
AnswerRe: script problem? PinmemberJason McBurney5-Apr-04 7:18 
QuestionHow do you use it? PinmemberWilly161319-Feb-04 7:26 
GeneralSuggestion PinsussGilberto Bermudez26-Sep-03 9:17 
GeneralSubmit button rollover Pinmembermacupryk4-Aug-03 11:22 
GeneralRe: Submit button rollover PinmemberJason McBurney4-Aug-03 11:53 
GeneralRe: Submit button rollover Pinmemberttrfanatic9-Aug-03 6:10 
GeneralSuggestion PinmemberGreg Ennis18-Jun-03 16:55 
QuestionProblem with several on a page? PinmemberJonTampa17-Jun-03 8:18 
AnswerRe: Problem with several on a page? PinmemberJason McBurney18-Jun-03 9:23 
GeneralCode Link Pinmemberfifi13-Jun-03 7:22 
GeneralRe: Code Link PinmemberJason McBurney13-Jun-03 7:32 
GeneralRe: Code Link PinadminChris Maunder13-Jun-03 9:06 
GeneralRe: Code Link PinmemberDaniel Turini13-Jun-03 12:08 
GeneralRe: Code Link PinmemberJason McBurney13-Jun-03 12:47 

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

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

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