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

Javascript
form中限制文本字节数js代码
use jscript with List Proxy Server Information
use jscript List Installed Software
List Installed Software Features
List Information About the Binary Files Used by an Application
List the Codec Files on a Computer
List the UTC Time on a Computer
List Installed Hot Fixes
excel操作之Add Data to a Spreadsheet Cell
Add Formatted Data to a Spreadsheet
Apply an AutoFormat to an Excel Spreadsheet
JavaScript语法着色引擎(demo及打包文件下载)
类之Prototype.js学习
一款JavaScript压缩工具:X2JSCompactor
iis6+javascript Add an Extension File
jscript之Open an Excel Spreadsheet
jscript之Read an Excel Spreadsheet
jscript之List Excel Color Values
去除图像或链接黑眼圈的两种方法总结
Add a Formatted Table to a Word Document

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 327 ::
收藏到网摘: 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>