Set Image focus on mouseover

[KEYUR]

Hi,

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.

Keyur

[Niko]

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,
Niko
the Telerik team