How to change the drop-down arrow on mouseover?

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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

This Code Library is part of the product documentation and subject to the respective product license agreement.