将鼠标悬停在asp:ImageButton上时更改标签的值

时间:2015-01-07 17:37:00

标签: c# asp.net

在我的欢迎页面上,有一系列的6个asp:ImageButton' s。当盘旋时,图像将交换以通过使用两个单独的图像来创建它从灰色变为橙色的效果。我有那部分编码和工作就像一个魅力。

现在,对于这次冒险的次要部分,我有两个标签,一个用于标题,一个用于描述。这些将是空白的,直到用户将鼠标悬停在其中一个按钮上,然后标题标签应对应于页面的标题,并且描述标签应对应于页面的描述。当用户将鼠标悬停在按钮外时,按钮将变回灰色,标签变为不可见或空白。

这是我当前状态下其中一个按钮的代码格式:

ASP中的按钮

<asp:ImageButton ID="imgContact" runat="server" CssClass="tiles" ImageUrl="~/images/inContact.png" />

位于Page_Load事件处理程序

中的C#代码
imgContact.Attributes.Add("onmouseover", "this.src='images/acContact.png'");
            imgContact.Attributes.Add("onmouseout", "this.src='images/inContact.png'");

此页面中使用的标签是lblTitle和lblDescription。我已尝试在Page_Load事件中使用if语句执行此操作,但我在那里没有运气,特别是在尝试使用难以置信的事件处理程序时,我认为它将是OnMouseOver,但这似乎并不适合由于每当我尝试使用它或类似的东西时产生的错误,我正在寻找的东西。

我想尽可能地避免使用JavaScript并坚持使用C#。我应该从哪里开始?提前谢谢!

1 个答案:

答案 0 :(得分:1)

这是你想要实现的目标。

将此添加到您的aspx页面:

<asp:TextBox ID="TextBox1" runat="server" Enabled="false" Text="title label" CssClass="TitleLabel"></asp:TextBox>
<asp:TextBox ID="DescriptionLabel" runat="server" CssClass="DecriptionLabel" Text="description label"></asp:TextBox>

并将代码更改为此

imgContact.Attributes.Add("onmouseover", "this.src='images/acContact.png';document.getElementsByClassName('TitleLabel')[0].value='first title';document.getElementsByClassName('DecriptionLabel')[0].value='first description'");
imgContact.Attributes.Add("onmouseout", "this.src='images/inContact.png';document.getElementsByClassName('TitleLabel')[0].value='title label';document.getElementsByClassName('DecriptionLabel')[0].value='description label'");

你说你不想使用javascript但是使用 imgContact.Attributes 功能添加 onmouseover onmouseout 你是将javascript添加到网页:)查看网页上的源代码,了解生成的代码的外观。我的回答将解决您的问题,但试着了解它的工作原理。玩得开心;)