RadBinaryImage - performing mouseover events with two binary images

[Daniel Cheney]

Hi there,

We're trying to use the RadBinaryImage control to handle the onmouseover and onmouseout events, but are in a bit of a loss in how to do so.

We have two binary images (from the database) and we want the following to occur:

• The first one to appear as the page loads,
• When the users hovers over it with the mouse, we want the second image to appear in the place of the first image,
• When the second image loses focus from the mouse it should revert back to the original image.

Is there a way to achieve this without having to write the binary image to a directory beforehand?

Thanks,

Daniel

[Daniel Cheney]

Ended up solving this after my brain kicked into gear...

I created two RadBinaryImageControls (0x0 px large) and an empty Image control:

<asp:LinkButton ID="lbEventType" runat="server" OnClick="lbEventType_Click">
                                    <telerik:RadBinaryImage ID="rbiEventTypeOff" runat="server" ImageAlign="AbsMiddle"
                                        Height="80" Width="80" Style="visibility: hidden; width: 0px; height: 0px;" />
                                    <telerik:RadBinaryImage ID="rbiEventTypeOn" runat="server" ImageAlign="AbsMiddle"
                                        Height="80" Width="80" Style="visibility: hidden; width: 0px; height: 0px;" />
                                    <asp:Image ID="imgEventType" runat="server" Style="width: 80px; height: 80px; margin-right: 10px;" />
                                </asp:LinkButton>

 

Then ran the following code (We're doing this inside a RadList ItemDataBound event):

                        EventType eventType = item.DataItem as EventType;
                        RadBinaryImage imageOn = e.Item.FindControl("rbiEventTypeOn") as RadBinaryImage;
                        Image image = e.Item.FindControl("imgEventType") as Image;

                        imageOff.AutoAdjustImageControlSize = false;
                        imageOn.AutoAdjustImageControlSize = false;

                        if (eventType.Name == "All")
                        {
                            imageOn.ImageUrl = Constants.EVENT_TYPE_ALL_IMAGE_URL_ON;
                        }
                        else
                        {
                            lb.CommandArgument = eventType.Id.ToString();
                            imageOff.DataValue = eventType.MouseOffIcon;
                            imageOn.DataValue = eventType.MouseOverIcon;
                        }

                        image.Attributes["src"] = imageOff.ImageUrl;
                        image.Attributes.Add("style", "width: 80px; height: 80px; margin-right: 10px;");
                        image.Attributes.Add("onmouseover", "swapImage(this, '" + imageOn.ClientID + "'); javascript: this.style.height='100px'; this.style.width='100px';");
                        image.Attributes.Add("onmouseout", "swapImage(this, '" + imageOff.ClientID + "'); javascript: this.style.height='80px'; this.style.width='80px';");

I also have a JS function called swapImage which does the following:

function swapImage(image, swapTo) {
                swapTo = document.getElementById(swapTo);
                image.src = swapTo.src;
}

Hope this helps someone else in the future.

Cheers,

Daniel