How to change the drop-down arrow on mouseover?

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 24 Mar 2006 Link to this post

    Requirements

    RadControl version

    RadComboBox v2.0.3 or Telerik.Web.UI v2007.3 1425

    .NET version

    2.0

    Visual Studio version

    2005

    programming language

    C#

    browser support

    all browsers supported by RadComboBox




    PROJECT DESCRIPTION
    This project uses an entirely client-side approach. First, we hook to the OnClientLoad event of the RadComboBox:

    <telerik:RadComboBox id="RadComboBox1" runat="server" OnClientLoad="OnClientLoad" ... > 

    Then we define the OnClientLoad function and two helper functions as follows:

                       function OnClientLoad(sender) 
                { 
                    var anchor = sender.get_imageDomElement(); 
                     
                    var imageParentCell = anchor.parentNode; 
     
                    imageParentCell.onmouseover = setCustomBackgroundImage; 
                     
                    imageParentCell.onmouseout = setDefaultBackgroundImage; 
                } 
                 
                function setCustomBackgroundImage() 
                { 
                    this.style.background = "url('DropArrow.gif') !important"
                } 
                 
                function setDefaultBackgroundImage() 
                { 
                    this.style.background = ""
                } 

    The image we want to change is a background of the table cell which contains the anchor, representing the drop down toggle button. We get a reference to that table cell and override its default background image with the desired image on mouse over. Then on mouse out we clear the background attribute, which brings back the default image.



    PROJECT DESCRIPTION
    This project uses an entirely client-side approach. First, we hook to the onload event of the body of our page:

    <body onload="AttachMouseEventsForImage()"

    Then we add the following script, which hooks two functions to the mouseover and mouseout events of the drop down toggle image element. The first one changes the source of the image to point to the desired image. The second one brings back the default one:

        <script language="javascript" type="text/javascript"
            var originalSource = null
            function AttachMouseEventsForImage() 
            { 
                comboInstance = <%=RadComboBox1.ClientID %>
                
                var input = document.getElementById(comboInstance.ImageID); 
                
                originalSource = input.src; 
                
                input.onmouseover = function() 
                { 
                    this.src = "DropArrow.gif"
                }; 
                
                input.onmouseout = function() 
                { 
                    this.src = originalSource; 
                } 
            } 
        </script> 
Back to Top