控件实现点击预览图片更改页面背景图片的效果

本实例将在页面上放置2个ImageButton并设置背景图片,当点击其中一个按钮时对应的会将网页的背景图片更改为按钮的背景图片。
程序实现的主要步骤为:
(1)新建一个网站并创建default . aspx页面,在default . aspx页面上添加2个ImageButton控件,其属性设置如表3.9所示。
表3.9 ImageButton控件属性设置

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

 <代码> 01 publicpartialclass_Default: System.Web.UI.Page
　　02年{
　　03 publicstring imgUrl=" ";//定义全局变量
　　04 protectedvoid employee(对象发送方,EventArgs e)
　　05年{
　　
　　06}
　　07年protectedvoid ImageButton1_Click(对象发送方,ImageClickEventArgs e)
　　08年{
　　09年imgUrl=((ImageButton)发送者).ImageUrl;//点击第一个图片时设置imgUrl变量的图片路径
　　10}
　　11 protectedvoid ImageButton2_Click(对象发送方,ImageClickEventArgs e)
　　12 {
　　13 imgUrl=((ImageButton)发送者).ImageUrl;//点击第二个图片时设置imgUrl变量的图片路径
　　14}
　　15} 

(3)最后一步就是设置网页的背景图片,这里需要通过Css样式来实现,首先在页面“源”中找到身体标签,然后在身体标签上定义风格属性并且指定属性样式背景图像,在通过内嵌表达式的方式来绑定背景图片的URL地址,身体及其子元素内容如下:

 <代码> 01 & lt; body>
　　02年& lt; formid=runat=胺衿鳌北取癴orm1”;
　　03 & lt; div>
　　04 & lt; asp: ImageButtonID=" ImageButton1 "宽度=" 100 "高度=" 70 " AlternateText=癐mageButton按钮”BorderColor=昂谏盉orderWidth=? px”ImageUrl="/图像/Koala.jpg " runat=" server " OnClick=" ImageButton1_Click "/比;
　　05年,,,,,,,,,,
　　06 & lt; asp: ImageButtonID=" ImageButton2 "宽度=" 100 "高度=" 70 " AlternateText=癐mageButton按钮”BorderColor=昂谏盉orderWidth=? px”ImageUrl="/图像/Penguins.jpg " runat=" server " OnClick=" ImageButton2_Click "/比;
　　07年& lt;/div>
　　08年& lt;/form>
　　09 & lt;/body>  

运行实例,单击ImageButton预览按钮,页面背景将被设置为预览按钮图片的效果,如3.22图。
控件实现点击预览图片更改页面背景图片的效果