Set Image focus on mouseover

2 posts, 0 answers
  1. KEYUR
    KEYUR avatar
    2 posts
    Member since:
    Apr 2011

    Posted 20 May 2011 Link to this post


    I am displaying couple of images inside the RadRotator. The RotatorType is Carousel. I want to set the image focus when the user mouseover any image inside the RadRotator. The OnClientMouseOver method works only when I mouseover any other control in my page and then mouseover the RadRotator Item (which in this case is an Image). 

    How do I fix this problem? I want the ability to set the currentItemIndex as soon as the I mouseover any item(s) within the RadRotator.

    Thanks for your help.


  2. Niko
    Niko avatar
    383 posts

    Posted 25 May 2011 Link to this post

    Hi Keyur,

    Your best option is to come up with a custom solution, as the OnClientMouseOver is a client-side event that is raised, when the mouse is within the rotator's container, not the various items. Here is a sample OnClientLoad handler that attached the mouseover event to each of the items and the mouseover handler sets corresponding current item index:
    function AttachMouseOver(rotator, args)
        var items = rotator.get_items();
        Array.forEach(items, function(item)
            $addHandler(item.get_element(), "mouseover", Function.createCallback(function(event, index)
                rotator.set_currentItemIndex(index, true);
            }, item.get_index()));

    Keep in mind that this solution will result in constant change of the current item. As the items are changed, the mouseover is called for the new item, that is under the mouse cursor, thus creating a perpetual change in the rotator. Therefore I do not advise you to use this solution, as it is not user-friendly. A better option will be to use the OnClientItemClicked event to change the current rotator's item.

    Hope this helps. Please, let me know if you run into troubles.

    All the best,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. DevCraft R3 2016 release webinar banner
Back to Top