Gridview ImageButton在鼠标悬停和鼠标移动时更改图像

I have Gridview in which I have an Imagebutton. It shows the image based on hfComplete (a hiddenfield) value.

我有Gridview,其中有一个Imagebutton。它显示基于hfComplete(隐藏字段)值的图像。

If the value is true, it shows "images/completeiconfixed.png" and attach the attribute to onmouseover "this.src='images/completeiconfixed_transparant.png';"

如果值为true,则显示“images / completeiconfixed.png”并将属性附加到onmouseover“this.src ='images / completeiconfixed_transparant.png';”

If it is false it shows "images/completeiconfixed_transparant.png" and attach the attribute to onmouseout "this.src='images/completeiconfixed.png';"

如果为false,则显示“images / completeiconfixed_transparant.png”并将该属性附加到onmouseout“this.src ='images / completeiconfixed.png';”

So far it is working fine for only first time. It loads the images fine and when I mouse over first time it change the image but second time it does not.

到目前为止它只是第一次正常工作。它可以很好地加载图像,当我第一次鼠标悬停时它会改变图像,但第二次没有。

Any idea how to make it working on every mouse over and out. My code is bellow.

任何想法如何使它在每个鼠标上都能正常工作。我的代码是吼叫。

<asp:TemplateField HeaderText="C">
    <ItemTemplate>
        <asp:ImageButton ID="imgComplete" runat="server" CommandName="completeRecord" 
            CommandArgument='<%# Eval("TaskID") + "," + Eval("Completed")%>' 
            Height="16px" Width="16px"/>
    </ItemTemplate>
    <ItemStyle CssClass="mycol-md-3px mycol-xs-3px"></ItemStyle>
</asp:TemplateField>


protected void grdNetwork_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ImageButton imgComplete = (ImageButton)e.Row.FindControl("imgComplete");
        if (Convert.ToBoolean(hfCompleted.Value) == true)
        {
            imgComplete.ImageUrl = "images/completeiconfixed.png";
            imgComplete.Attributes.Add("onmouseover", "this.src='images/completeiconfixed_transparant.png';");
        }
        else
        {
            imgComplete.ImageUrl = "images/completeiconfixed_transparant.png";
            imgComplete.Attributes.Add("onmouseout", "this.src='images/completeiconfixed.png';");
        }
    }
}

Thanks in advance.

提前致谢。

1 个解决方案

#1

You may get the behavior that you want by setting onmouseover and onmouseout in both cases:

在这两种情况下,您可以通过设置onmouseover和onmouseout来获得所需的行为:

protected void grdNetwork_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ImageButton imgComplete = (ImageButton)e.Row.FindControl("imgComplete");
        if (Convert.ToBoolean(hfCompleted.Value))
        {
            imgComplete.ImageUrl = "images/completeiconfixed.png";
            imgComplete.Attributes.Add("onmouseover", "this.src='images/completeiconfixed_transparant.png';");
            imgComplete.Attributes.Add("onmouseout", "this.src='images/completeiconfixed.png';");
        }
        else
        {
            imgComplete.ImageUrl = "images/completeiconfixed_transparant.png";
            imgComplete.Attributes.Add("onmouseover", "this.src='images/completeiconfixed.png';");
            imgComplete.Attributes.Add("onmouseout", "this.src='images/completeiconfixed_transparant.png';");
        }
    }
}