网页中的图片的处理方法与代码


Posted in Javascript onNovember 26, 2009

1 掉链接的图片处理
<img src="no.jpg" onerror="this.src='images/new.gif'">

2 自动缩小大图
经常看到一些图片很大,上传后显示会撑满屏幕。下面的例子通过检测图片的宽度,如果该图片的宽度大于“屏幕宽度-350”,

则让该图就显示“屏幕宽度-350”这么大小。

原图
<img src="jsimg/wallpaper.jpg">
设定大小的图

<img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350) this.width=screen.width-350">

3 禁止IE6中大尺寸图片的自动缩小

 

原图,会自动缩小

<img src="jsimg/wallpaper.jpg">

设定不缩小

<img src="jsimg/wallpaper.jpg" galleryimg="no">

4 去掉热点地图上的区域线框与超链接的线框

 <a href="#" onFocus=this.blur()> <img src="jsimg/marylin.jpg" border=0> </a>

5 可控制上传图片的大小

处理上传图片大小的JS

<script language="JavaScript"> 
function orsc(){ 

 if(img.readyState!="complete") return false; 

 if(img.offsetWidth!=132&&img.offsetHeight!=99){ 

 alert("您选择的图片大小:"+img.offsetWidth+"X"+img.offsetHeight+"\n"+"请选择132X99大小的图片") 

 imgT=true; 

 } 

  } 

function mysubmit(theform){ 
   if(theform.file1.value==""){ 
   alert("请点击浏览按钮,选择您要上传的JPG或GIF文件!") 

 theform.file1.focus; 

 return (false); 

 } else { 

 str= theform.file1.value; 

 strs=str.toLowerCase(); 

 lens=strs.length; 

 extname=strs.substring(lens-4,lens); 

 if(extname!=".jpg" && extname!=".gif"){ 

 alert("请选择JPG或GIF格式的文件!"); 

 return (false); 

 } else { 

 document.all("loadImg").src=theform.file1.value 

 if(document.all("loadImg").offsetWidth!=132&&document.all("loadImg").offsetHeight!=99){ 
   alert("您选择的图片大小:"+document.all("loadImg").offsetWidth+"X"+document.all("loadImg").offsetHeight+"\n" 
+"请选择132X99大小的图片") 
   return (false) 
   } 

 } 

 } 

} 
</script>
<form onSubmit="return mysubmit(this)" name="form" method="post" enctype="multipart/form-data"> 
<table width="100%" border=0 cellspacing=0 cellpadding=0> 

<tr><td valign=top height=30> 

<input type="hidden" name="act" value="upload"> 

<input type="file" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FAMILY: "MS Shell Dlg", ","Tahoma", ","宋体"; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 1px 

" name="file1" value=""> 

<input type="submit" name="Submit" value="上传" > 

</td> </tr> </table> 

<img id=loadImg> 
</form>
Javascript 相关文章推荐
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
js 动态选中下拉框
Nov 26 #Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 #Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 #Javascript
JS小框架 fly javascript framework
Nov 26 #Javascript
jquery.ui.progressbar 中文文档
Nov 26 #Javascript
javascript 面向对象继承
Nov 26 #Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
php 分页类 扩展代码
2009/06/11 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
解读ES6中class关键字
2017/11/20 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
JS实现简易图片自动轮播
2020/10/16 Javascript
python实现rest请求api示例
2014/04/22 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python如何实现邮件功能
2020/05/27 Python
Python grpc超时机制代码示例
2020/09/14 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
某科技软件测试面试题
2013/05/19 面试题
父亲追悼会答谢词
2014/01/17 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js