鼠标悬停鼠标移开和GridView控件的ImageButton改变形象 [英] Gridview ImageButton change image on mouseover and mouseout

问题描述

我的GridView中，我有一个ImageButton的。它显示了基于hfComplete（一hiddenfield）值的形象。

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

如果该值为true，则显示图像/ completeiconfixed.png和附加属性的onmouseoverthis.src ='图像/ completeiconfixed_transparant.png';

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

如果它是假的显示图像/ completeiconfixed_transparant.png，重视的onmouseout属性this.src ='图像/ completeiconfixed.png';

If it is false it shows "images/completeiconfixed_transparant.png" and attach the attribute to 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.

不知道如何使它工作的每一个鼠标和缩小。我的code是波纹管。

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';");
        }
    }
}

先谢谢了。

推荐答案

您可能会得到你想要通过设置的onmouseover 和的onmouseout <行为/ code>在两种情况下：

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

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';");
        }
    }
}

这篇关于鼠标悬停鼠标移开和GridView控件的ImageButton改变形象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！