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


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 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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 使用post,get的一种简洁方式
2010/04/25 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
js实现日历的简单算法
2017/01/24 Javascript
javascript实现下雨效果
2017/03/27 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
大学生职业生涯规划范文
2014/01/22 职场文书
面试后的英文感谢信
2014/02/01 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
班级读书活动总结
2014/06/30 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
在CSS中使用when/else的方法
2022/01/18 HTML / CSS