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


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 全角转半角部分
Oct 28 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
关于JavaScript轮播图的实现
Nov 20 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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Vue实现简易计算器
2020/02/25 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
python实现网站的模拟登录
2016/01/04 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python sys模块常用方法解析
2020/02/20 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
旧时光糖果:Old Time Candy
2018/02/05 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
信息工作经验交流材料
2014/05/28 职场文书
幽默导游词开场白
2015/05/29 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL