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


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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
九种原生js动画效果
Nov 11 Javascript
jQuery的文档处理程序详解
May 10 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Vue实现下拉加载更多
May 09 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
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP引用返回用法示例
2016/05/28 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JavaScript使用cookie
2007/02/02 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python-基础-入门 简介
2014/08/09 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
小学生读书感言
2014/02/12 职场文书
家电业务员岗位职责
2014/03/10 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
公司管理制度范本
2015/08/03 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫