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


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获得地址栏参数的两种方法
Nov 08 Javascript
Prototype使用指南之selector.js
Jan 10 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python数据结构之图的应用示例
2018/05/11 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python 创建一维的0向量实例
2019/12/02 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
护理不良事件检讨书
2014/02/06 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS