OnMouseOver and listview items

3 posts, 0 answers
  1. Jure
    Jure avatar
    18 posts
    Member since:
    Jul 2010

    Posted 21 Dec 2010 Link to this post

    Hey!

    I am using a RadListView. Every item contains just one Image button like this:

    <ItemTemplate>
        <fieldset style="float: left; width: 270px; height: 110px;">
            <div>
                <asp:ImageButton ID="imgCategory" runat="server" OnClick="imgCategory_Click" OnDataBinding="imgCategory_DataBind"
    CommandArgument='<%# Eval("CategoryId") %>'/>
            </div>
         </fieldset>
    </ItemTemplate>

    I load the ImageButtons dynamacily in the codebehind, now I would like to change the Image source (ImageUrl) on MouseOver and on MouseOut is that possible.

    Do you have any different solution in your mind?

    Thanks for your asistance.

    Sincerely, Jure
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Dec 2010 Link to this post

    Hello Jure,


    One suggestion is accessing the control in ItemDatabound event and attaching the OnMuseOver and OnMiouseOut event to image control. Pass the imageUrl and image control (passing 'this' as parameter) to the client handler.
    Accessing Controls in RadListView

    Now in the client-side event handler, set the imageurl based on the url passed.


    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jure
    Jure avatar
    18 posts
    Member since:
    Jul 2010

    Posted 21 Dec 2010 Link to this post

    I've done it like this:

    protected void imgCategory_DataBind(object sender, EventArgs e)
            {
                ImageButton img = (ImageButton)sender;
    string urlOver = "over";
    string urlOut = "out";
    img.Attributes.Add("OnMouseOver", "javascript:ImgBtnMouseOut(" + urlOver + ");");
                img.Attributes.Add("OnMouseOut", "javascript:ImgBtnMouseOver(" + urlOut + ");");
    }  

    then i have javascript:

    function ImgBtnMouseOver(url) {
                alert("testOver");
            }

            function ImgBtnMouseOut(url) {
                alert("testOut");
            }
    function ImgBtnMouseOver(url) {
                alert("testOver");
            }
     
            function ImgBtnMouseOut(url) {
                alert("testOut");
            }

    And it doens't work, but if I add javascript functions without parameters:

    img.Attributes.Add("OnMouseOver", "javascript:ImgBtnMouseOut();");
    img.Attributes.Add("OnMouseOut", "javascript:ImgBtnMouseOver();");

    Now it works...

    What am I missing here?


Back to Top