控件实现点击预览图片更改页面背景图片的效果_aspx中使用本地图片按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/JAVAbccd/article/details/79021270

这个实例展示了如何使用ASP.NET的ImageButton控件，点击后将按钮背景图片设置为网页背景。通过设置控件属性，添加单击事件处理方法，获取ImageUrl并赋值给全局变量，最后通过CSS样式改变body的背景图像，实现实时预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本实例将在页面上放置2个ImageButton并设置背景图片，当点击其中一个按钮时对应的会将网页的背景图片更改为按钮的背景图片。

程序实现的主要步骤为：

（1）新建一个网站并创建Default.aspx页面，在Default.aspx页面上添加2个ImageButton控件，其属性设置如表3.9所示。

表3.9 ImageButton控件属性设置

控件类型	控件名称	主要属性设置	用途
标准/ImageButton控件1	ImageButton1	ImageUrl属性设置为“/image/Koala.jpg” AlternateText为“ImageButton按钮” BorderColor为“Black” BorderWidth为“2px”	输入用户名
			输入密码
标准/ImageButton控件2	ImageButton2	ImageUrl属性设置为“/image/Penguins.jpg” AlternateText为“ImageButton按钮” BorderColor为“Black” BorderWidth为“2px”	【登录】按钮
			【取消】按钮

（2）属性设置完成之后再来添加单击事件，将编辑器切换到“设计”模式下，分别双击2个按钮使其自动生成2个事件处理方法，这时在后台代码的Page_Load方法上面定义一个字符串类型的全局变量imgUrl，用于接收2个按钮的图片URL地址，接着在2个按钮的处理方法中分别获取到各自的ImageUrl属性的值，再讲获取出来的值赋值到全局变量imgUrl中，这一过程的全部实现代码如下：

01 publicpartialclass_Default : System.Web.UI.Page

02 {

03 publicstring imgUrl = "";//定义全局变量

04 protectedvoid Page_Load(object sender, EventArgse)

05     {

 

06     }

07 protectedvoidImageButton1_Click(object sender, ImageClickEventArgs e)

08     {

09         imgUrl = ((ImageButton)sender).ImageUrl;//点击第一个图片时设置imgUrl变量的图片路径

10     }

11 protectedvoidImageButton2_Click(object sender, ImageClickEventArgs e)

12     {

13         imgUrl = ((ImageButton)sender).ImageUrl;//点击第二个图片时设置imgUrl变量的图片路径

14     }

15 }

（3）最后一步就是设置网页的背景图片，这里需要通过Css样式来实现，首先在页面“源”中找到body标签，然后在body标签上定义style属性并且指定属性样式background-image，在通过内嵌表达式的方式来绑定背景图片的URL地址，body及其子元素内容如下：

01  <bodystyle="background-image:url('<%=imgUrl%>'); background-repeat:no-repeat;">

02  <formid="form1"runat="server">

03  <div>

04  <asp:ImageButtonID="ImageButton1"Width="100"Height="70"AlternateText="ImageButton按钮"BorderColor="Black"BorderWidth="2px"ImageUrl="/image/Koala.jpg"runat="server"OnClick="ImageButton1_Click"/>

05       

06  <asp:ImageButtonID="ImageButton2"Width="100"Height="70"AlternateText="ImageButton按钮"BorderColor="Black"BorderWidth="2px"ImageUrl="/image/Penguins.jpg"runat="server"OnClick="ImageButton2_Click"/>

07  </div>

08  </form>

09  </body>

运行实例，单击ImageButton预览按钮，页面背景将被设置为预览按钮图片的效果，如图3.22。