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


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
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
tab栏切换原理
Mar 22 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
ztree+ajax实现文件树下载功能
May 18 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实现的获取URL信息的类
2007/01/02 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
js 替换
2008/02/19 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
四年级语文教学反思
2014/02/05 职场文书
食品工程专业求职信
2014/06/15 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python