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


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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
javascript 简练的几个函数
Aug 29 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
layui弹出层效果实现代码
May 19 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 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
一些关于PHP的知识
2006/11/17 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vue实现计算器功能
2020/02/22 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
django加载本地html的方法
2018/05/27 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
经贸日语专业个人求职信范文
2014/04/29 职场文书
会计求职信
2014/05/29 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书