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


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 相关文章推荐
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
移动端界面的适配
Jan 11 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
教堂婚礼主持词
2014/03/14 职场文书
500字作文之周记
2019/12/13 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python