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


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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
轮播图组件js代码
Aug 08 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
JavaScript实现alert弹框效果
Nov 19 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python实现Linux监控的方法
2019/05/16 Python
python binascii 进制转换实例
2019/06/12 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
"引用"与指针的区别是什么
2016/09/07 面试题
建筑工程自我鉴定
2013/10/18 职场文书
对祖国的寄语大全
2014/04/11 职场文书
单位租房协议书样本
2014/10/30 职场文书
家长给老师的感谢信
2015/01/20 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
初中语文教师研修日志
2015/11/13 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL