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


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 相关文章推荐
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
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
第十四节 命名空间 [14]
2006/10/09 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
详解webpack 入门与解析
2018/04/09 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python super()函数使用及多重继承
2020/05/06 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
就业意向书
2014/07/29 职场文书
单位委托书怎么写
2014/09/21 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Golang获取List列表元素的四种方式
2022/04/20 Golang
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS