当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 网页中的图片的处理方法与代码

Javascript
动态生成select选项全接触
不刷新页面动态更新select选项,实现两个select相互操作
网页输入框日期型有效性判定一网打尽
实用Javascript函数之一(自动将输入文本框中的内容转换成大写字符)
实用Javascript函数之二(自动将输入文本框中的内容转换成小写字符)
实用Javascript函数之三(限制文本输入框中只能输入数字\"0\"到\"9\")
实用Javascript函数之四(用于对sString字符串进行前空格截除)
实用Javascript函数之五(用于对sString字符串进行后空格截除)
实用Javascript函数之六(截除字符串前后空格)
如何使用交替的滚动标题
采用DOM模型时创建一个Select节点后,要删除option项的解决方法
javascript函数速查
利用JavaScript和正则表达式进行丰富的日期判断(给其它项目组的代码,有比较好的编程风格和注释)
关于字符串的几个有用函数
FileSystemObject 的例子(处理驱动器、文件夹、文件)
用JScript实现VB.Net,C#的[委托Delegate]:
得到固定字符位置的函数
IE NC通用的藏鼠标右键一法
Menu
foolpot2001菜单

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 27 ::
收藏到网摘: n/a

昨天的一篇 图片的alt属性 文章评论中的启发,特将网页中的图片的一些处理方法 小小的总结一下 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>