一谈到 Web 页面上的按钮,Web 开发人员想要为按钮赋予的较为常见的功能就是翻转效果。翻转效果就是当终端用户将其鼠标置于 Web 页面的某个按钮上时(并不单击该按钮),该按钮的颜色和形状将发生改变。对于具有多个按钮的 Web 页面而言,该功能尤为有用,从使用角度而言这是很有用的,会在终端用户单击按钮之前通知其要对该按钮执行单击操作了。
在服务器控件出现之前,该操作很容易实现,现在,尽管有了服务器控件,也不是那么困难。执行类似操作的代码如下:
1
<%@ Page Language="C#" %>
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
<script runat="server">
4
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
5
{
6
Label1.Text = "回发!";
7
}
8
</script>
9![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
<html xmlns="http://www.w3.org/1999/xhtml" >
11
<head runat="server">
12
<title>使用 JavaScript</title>
13
</head>
14
<body>
15
<form id="form1" runat="server">
16
<div>
17
<p>
18
<asp:ImageButton id="ImageButton1"
19
onmouseover="this.src='button2.gif'"
20
onclick="ImageButton1_Click"
21
onmouseout="this.src='button1.gif'" runat="server"
22
ImageUrl="button1.gif"></asp:ImageButton>
23
</p>
24
<p>
25
<asp:Label id="Label1" runat="server" />
26
</p>
27
</div>
28
</form>
29
</body>
30
</html>
31![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
这次我们不通过 <body> 元素将 JavaScript 指定给服务器控件,而是使用控件的 onmouseover 和 onmouseout 事件。对于每个事件,我们均指定一个 JavaScript 值。onmouseover 事件表示终端用户将其鼠标置于控件上方的操作,而 onmouseout 表示终端用户将其鼠标从控件上方移开的操作。在本例中,我们希望当鼠标置于按钮上方时会显示一张图像,而在当加载页面后与当将鼠标从按钮移开后会显示原始图像。
如果您正在直接使用该类控件,而不是像我们在 <body> 元素中使用 JavaScript 时那样在 form 中指定控件,您可以使用 this 关键字,其后紧跟您试图更改的属性ASP.NET 2.0 现在包括了为其中的一个 HTML 表单元素设置(光标的)焦点的功能。在 ASP.NET 2.0 之前,您必须亲自使用 JavaScript 来完成同样的任务。例如,如果您的 ASP.NET 1.x 页面中有多个文本框,则可通过在页面的 <body> 标记中使用以下代码来使页面在加载后将焦点设置为第一个 TextBox 控件
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
ASP.NET 2.0 通过添加 Focus() 方法使得该任务变得非常简单。现在,您可以通过下面的代码来完成对 TextBox 控件的焦点设置:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)