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


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中的作用域scope介绍
Dec 28 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
谈谈JavaScript中的函数
Sep 08 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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代码
2008/09/10 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
javascript之bind使用介绍
2011/10/09 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Django密码系统实现过程详解
2019/07/19 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
python实现五子棋程序
2020/04/24 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
店长岗位职责
2013/11/21 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
教师研修随笔感言
2014/01/23 职场文书
文化宣传方案
2014/03/13 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
python计算列表元素与乘积详情
2022/08/05 Python