RadBinaryImage - performing mouseover events with two binary images

2 posts, 0 answers
  1. Daniel Cheney
    Daniel Cheney avatar
    2 posts
    Member since:
    Feb 2010

    Posted 29 Sep 2010 Link to this post

    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
  2. Daniel Cheney
    Daniel Cheney avatar
    2 posts
    Member since:
    Feb 2010

    Posted 29 Sep 2010 Link to this post

    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 imageOff = e.Item.FindControl("rbiEventTypeOff") as RadBinaryImage;
                            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")
                            {
                                imageOff.ImageUrl = Constants.EVENT_TYPE_ALL_IMAGE_URL_OFF;
                                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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top