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

最新推荐文章于 2020-11-22 04:49:54 发布
最新推荐文章于 2020-11-22 04:49:54 发布
阅读量659 收藏
点赞数
文章标签： asp.net ImageButton
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAVAbccd/article/details/79021270
版权
这个实例展示了如何使用ASP.NET的ImageButton控件，点击后将按钮背景图片设置为网页背景。通过设置控件属性，添加单击事件处理方法，获取ImageUrl并赋值给全局变量，最后通过CSS样式改变body的背景图像，实现实时预览效果。
摘要由CSDN通过智能技术生成

本实例将在页面上放置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控件
最低0.47元/天 解锁文章
明日科技-w
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一款网页图片预览插件：viewer
04-08
Viewer，一款好用的图片预览插件 使用文档：https://blog.csdn.net/qq_40065776/article/details/103893243
点击更换背景图片
qq_43469418的博客
01-09 537
<style> * { margin: 0px; padding: 0px; } body { background-image: url("images/1.jpg"); } #mask { background-color: rgba(255, 255, 255, 0.3); ...
html 网页图片全屏预览 插件
07-29
html 网页图片全屏预览 插件 支出各种浏览器
点击指定的图片变换背景图
xieqian0204的博客
01-05 1105
h1{   width: 100%;   color: palevioletred;   text-align: center;   }   ul{   width: 100%;   height: 140px;   float: none;   display: block;   position: absolute;   top: 200px;   left: 100p
如何设置C# treeview Web控件背景图片
xrb212的专栏
01-29 1407
一、先将treeview背景设置为透明,方法如下：    修改treeview.htc,在buildTreeFromRoot()函数中的  bodyNode.style.direction   =   element.currentStyle.direction;  后面加入如下代码：  bodyNode.style.background   =   "transparent";二、把放treev
FastReport和ReportMachine打印图片黑块解决办法(适用黑白打印简单内容图片).docx
11-12
但是，仅仅更改文件扩展名并不足以解决问题，需要实际转换图片的格式。 2. **降低位深度**：将BMP图片的位深度设置为1位。位深度决定了图像可以显示的颜色数量，1位表示只有两种颜色（通常是黑色和白色），这使得...
功能强大的免费DataGridView打印控件
12-11
VB2008Print为通用打印控件（为可视化组件），可以混合打印一个或多个DataGridView表格、DataGrid表格与文字、图片等内容；而DGVprint是以VB2008Print为基础开发的（为非可视化组件），为专用的表格打印控件，可以很...
免费DataGridView打印及.NET轻松打印控件5.0版
05-13
与4.95版相比，控件5.0版的主要更改如下： 1、解决了生成预览及打印过程中的状态窗口中显示的“第 页共 页”问题，现在可以正确显示总页数。 2、增加了打印DataGridView中选定内容（选定行、列或矩形区域）的功能。...
免费DataGridView打印及.NET轻松打印控件5.7版（VB打印，C#打印，Excel导入导出，多表头显示与打印）
11-03
5.2版控件新增了一个Chartlet的组件，使用非常方便，可以生成柱形图、饼图、折线图等多种图形，而且可以设置2D或3D效果，既可以在打印控件中打印出来，也可以在Graphics对象中显示。 4、分组汇总打印DataGridVeiw...
免费DataGridView打印及.NET轻松打印控件5.6版（VB打印，C#打印）
06-22
5.2版控件新增了一个Chartlet的组件，使用非常方便，可以生成柱形图、饼图、折线图等多种图形，而且可以设置2D或3D效果，既可以在打印控件中打印出来，也可以在Graphics对象中显示。 4、分组汇总打印DataGridVeiw...
替换点击按钮或图片背景
06-08
两种状态图片，A和B，点击A时就变为B，点击B就变为A互相切换状态
background-image 微信小程序--背景图片手机无法预览
飞翔的熊blabla
05-03 4555
本地资源无法通过 WXSS 获取background-image：可以使用网络图片，或者 base64，或者使用<image/>标签目前小程序好像没有支持手机预览背景本地图片，所以将本地图片改为网络图片链接就可以了background: url("https://..../img/no.png") no-repeat;...
点击改变网页图片背景
zgqtxwd的专栏
05-01 402
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
asp.net简单实现用button做按钮图片
weixin_30439067的博客
07-20 1587
<a href="#" class="aLink">首页</a> --- 这里是链接，并且应用样式aLink<style type="text/css">.aLink ---- 这里设置样式aLink{background-image:url(这里选你的背景图片);/*就是图片的路径*/color:这里设置你的当前字体颜色} .aLink:hover ---...
aspx 修改了样式但是在点击按钮后被刷新_可能被忽略的按钮细节
weixin_39842744的博客
11-22 292
点击上方蓝色文字关注我们吧原创声明本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 ( id: yuewen_YFE) 获取授权，并注明作者、出处和链接。对于组件的开发，我们首推的是在开始写代码之前一定要和设计师沟通。看看设计师对于我们组件的拓展是怎么思考的。以规避程序员和设计师拓展方式的不一致导致的设计师一小改程序员一大改的成本问题。通常我们需要做一个按钮的时候...
鼠标点击更换背景图片
a63438840的博客
07-28 2314
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=...
类型为image的input标签，鼠标点击切换按钮背景图片
sum__mer的专栏
08-11 3146
input标签生成的按钮，使用图片作为按钮背景，鼠标点下时切换背景图片，鼠标松开时，回到默认背景图片。使用的背景图片如下： 效果图： $(function(){ //"打开"按钮控制 var openbutton = $("#openvideo"); openbutton.mousedown(function(){ openbutton.
asp.net上传图片并能实现实时预览
宜臶瑏芯的博客
01-17 3560
前台aspx：         //下面用于图片上传预览功能         function setImagePreview(avalue) {             document.getElementById("tbFile").value = document.getElementById("file").value;             var docObj = do
JavaScript图片上传预览技术解析与实现
“JavaScript图片上传预览效果 - 博客园社区首页新随笔联系管理订阅 JavaScript 图片上传预览效果 图片上传预览技术的实现与浏览器兼容性探讨” 本文主要讨论了如何使用JavaScript实现图片上传预览效果，这是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值