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


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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
小程序实现搜索框
Jun 19 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php 图片上传类代码
2009/07/17 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python记录程序运行时间的三种方法
2017/07/14 Python
人机交互程序 python实现人机对话
2017/11/14 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
最新大学生自我评价
2013/09/24 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
小学作文评语大全
2014/04/21 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python