网页图片处理代码全集整理

1，掉链级图片的替代图片
            <img src="no.jpg" onerror="this.src=‘images/logo.gif‘">
            2，自动缩小大图
            　　经常看到一些图片很大，上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”，则让该图就显示“屏幕宽度-350”这么大小。
            原图<br>
            <img src="jsimg/wallpaper.jpg"><br>
            设定大小的图<br>
            <img src="jsimg/wallpaper.jpg"
            onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">
            3，禁止IE6中大尺寸图片的自动缩小
            原图,会自动缩小<br>
            <img src="jsimg/wallpaper.jpg"> <br>
            设定不缩小<br>
            <img src="jsimg/wallpaper.jpg" galleryimg="no">
            4，去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）
            方法一：
            <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
            方法二：
            <img galleryimg="no">
            定义CSS：
            <style>
            img {nobar:expression(this.galleryImg=‘no‘)}
            </style>
            5，去掉热点地图上的区域线框与超链接的线框
            <a href="#" onFocus=this.blur()><img src="jsimg/marylin.jpg"
            border=0></a>
            6，可控制上传图片的大小
            <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;
            }
            //alert("图片大小："+img.offsetWidth+"X"+img.offsetHeight);
            //alert("图片尺寸："+img.fileSize);
            }
            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>
            7，检测一个图片的长宽尺寸
            <script>
            var img=null;
            function s()
            {
            if(img)img.removeNode(true);
            img=document.createElement("img");
            img.style.position="absolute";
            img.style.visibility="hidden";
            img.attachEvent("onreadystatechange",orsc);
            img.attachEvent("onerror",oe);
            document.body.insertAdjacentElement("beforeend",img);
            img.src=inp.value;
            }
            function oe()
            {
            alert("cant load img");
            }
            function orsc()
            {
            if(img.readyState!="complete")return false;
            alert("高:"+img.offsetHeight+"\n宽:"+img.offsetWidth);
            }
            </script>
            <input type="file" Name="file" id="inp" value="默认值"><br><input
            onclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽"
name="button">
            8，按比例缩小
            <script defer>
            for (var i=0;i<document.images.length;i++){
            document.images[i].width=document.images[i].width*0.5
            }
            </script>
            <img src="img/wallpaper.jpg">
            9，类似Acdsee看大图的时的拖动
            <html>
            <head>
            <title>Untitled    Document</title>
            <meta    http-equiv="Content-Type"    content="text/html;   
            charset=gb2312">
            <script    language="JavaScript">
            <!--
            var    scrollcount=0;
            var    dragy;
            var    scrollarrowtop;
            function    initdrag()    {
            scrollcount=1;
            dragy=event.clientY;
            document.body.setCapture();
            }
            function    startdrag()    {
            if    (scrollcount==1)    {
            window.scrollBy(dragy-event.clientX,dragy-event.clientY);
            document.body.style.cursor=‘hand‘;
            dragy=event.clientY;
            }
            }
            function    enddrag()    {
            document.body.style.cursor=‘‘;
            scrollcount=0;
            document.body.releaseCapture();
            }
            //    -->
            </script>
            </head>
            <body    bgcolor="#FFFFFF"    text="#000000"   
            onselectstart="return    false;"    onmousedown="initdrag()"   
            onmousemove="startdrag()"    onmouseup="enddrag()"    scroll=yes>
            <img        src="img/wallpaper.jpg">   
            <img        src="img/whitney.jpg">
            </body>
            </html>
            10，选择图片产生缩略图，最多10个
            <html>
            <head>
            <title>Upload Image</title>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <SCRIPT language=Javascript>
            gFlag=false;
            var
            gMaxSize,gCurrentSize,gUploadSize,gCurInputIndex,gCurImageSrc,gCurOFile;
            gMaxSize="10";
            gCurrentSize=".18";
            gMaxSize=parseFloat(gMaxSize)*1024*1024;
            //gMaxSize=parseFloat("1")*1024;
            gCurrentSize=parseFloat(gCurrentSize)*1024*1024;
            gErr="";
            gUploadSize=0;
            ////////////////////////////////////////////////////
                  function validate()
                  {
                  var lErr;
                  lErr="";
                      if((gUploadSize+gCurrentSize)>gMaxSize){
                         if(form1.TempAlbum.value!=form1.OldAlbum.value){
                            lErr=".您要上传的图片尺寸大于您的剩余相册容量,请选择上传至\"临时相册\"\n"+lErr;
                            }
                        }
                 
                      if(form1.OldAlbum.value=="0"){
                         if(form1.NewAlbum.value.length==0){
                            lErr=".请输入新相册名称\n"+lErr;
                         }
                       }
                       if(lErr.length>0){
                          alert("错误:\n"+lErr);
                          if(lErr.indexOf("请输入新相册名称\n\n")!=-1){
                              form1.NewAlbum.focus();
                          }
                          return false;
                          }
                        
                         
                        form1.submit();
                        /*进度条控制*/
                        //var
            winProgress=window.open("progress.htm","progress","width=300,height=250");
                        //winProgress.focus();
                        /*进度条控制*/
                       
                        return true;
                   }
                 
                function handleBadImage() {
                    alert(‘所选图片并非有效的JPG格式!\n请重新选择!‘);
                    eval("form1.file"+gCurInputIndex+".outerHTML=\"<input
            type=\\\"file\\\" name=\\\"file"+gCurInputIndex+"\\\"
            style=\\\"width:275\\\"  value=\\\"\\\"
            onChange=\\\"FileChange(this);\\\">\"");
                   
eval("form1.file"+gCurInputIndex+".fireEvent(\"onChange\")");
                    return false;
                }
                
                function handleGoodImage() {
                    imgsrc=‘<img src="‘+gCurImageSrc+‘"
            onload="DrawImage(this,‘+gCurInputIndex+‘); " width="0"
height="0">‘;
                    gCurOFile.parentNode.previousSibling.innerHTML=imgsrc;
                    return true;
                }
                ////////////////////////////////////////// 
                  function FileChange(oFile){
                    gErr="";
                    gUploadSize=0;
                    str=‘‘;
                    gCurOFile=oFile;
                    gCurImageSrc=oFile.value;
                    inputname=oFile.name;
                    i=inputname.substr((inputname.length-1),1);
                    gCurInputIndex=i;
                   
                  if (gCurImageSrc.length>0){
                        //check for none jpg
                        imgExt=new Image();
                        imgExt.onload=handleGoodImage;
                        imgExt.onerror=handleBadImage;
                        var fileName = gCurImageSrc.replace("\\", "/"); // NN7
                        var imgURL = ‘file:///‘ + fileName;
                       
                        if((navigator.appVersion.indexOf(‘Mac‘)>-1) &&
            (navigator.appVersion.indexOf(‘MSIE‘)>-1)){
                            imgURL=‘file://‘ + fileName;
                        }
                        imgExt.src=imgURL;
                        //finish check
                     
                      }
                 
                  }
                 
                  function ShowImgOfServer(NewPath,ImgD){
                  ImgD.src=NewPath;
                  }
                 
                ///////////////////////////////////// 
                function DrawImage(ImgD,Index){
                var flag=false;
                   var image=new Image();
                   image.src=ImgD.src;
                   ImgD.value=ImgD.src;
                   if(image.fileSize>2048000){
                      image.outerHTML="";
                      gErr+="此图片尺寸过大,图片尺寸应小于2MB\n";
                      eval("form1.file"+Index+".outerHTML=\"<input
            type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\"
             value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
                      eval("form1.file"+Index+".fireEvent(\"onChange\")");
                      alert("此图片尺寸过大,图片尺寸应小于2MB\n");
                      return ;
                      }
                  
            if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){
                      image.outerHTML="";
                      gErr+="此图片类型不匹配,只能上传JPG(JPEG)格式文件\n";
                      eval("form1.file"+Index+".outerHTML=\"<input
            type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\"
             value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
                      eval("form1.file"+Index+".fireEvent(\"onChange\")");
                      alert("此图片类型不匹配,只能上传JPG(JPEG)格式文件\n");
                      return ;
                      }
                      tempFileName=image.src;
                      var iLastDot;
                      iLastLine=tempFileName.lastIndexOf(‘/‘);
                      if(iLastLine!=-1){
                         
            tempFileName=tempFileName.substring(iLastLine+1,tempFileName.length);
                      }
                   if(!CheckIfEnglish(tempFileName)){
                      image.outerHTML="";
                      gErr+="此图片文件名包含中文或其他不合法字符\n文件名只能由‘a-z‘、‘A-Z‘、‘_‘、‘-‘构成\n";
                      eval("form1.file"+Index+".outerHTML=\"<input
            type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\"
             value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
                      eval("form1.file"+Index+".fireEvent(\"onChange\")");
                     
alert("此图片文件名包含中文或其他不合法字符\n文件名只能由‘a-z‘、‘A-Z‘、‘_‘、‘-‘构成\n");
                      return ;
                   }
                   if(gErr.length>0){
                      return;
                      }
                   if(image.width>0 && image.height>0){
                    flag=true;
                    if(image.width/image.height>= 120/80){
                     if(image.width>120){ 
                     ImgD.width=120;
                     ImgD.height=(image.height*120)/image.width;
                     }else{
                     ImgD.width=image.width; 
                     ImgD.height=image.height;
                     }
                     ImgD.alt="图片大小(宽*高):
            "+image.width+"×"+image.height+"\n图片大小: "+image.fileSize+"\n图片路径:
            "+image.src;
                     eval(‘document.all.width‘+Index+‘.value=‘+image.width);
                     eval(‘document.all.height‘+Index+‘.value=‘+image.height);
                     var oCreated=new Date(image.fileModifiedDate);
                    
            eval(‘document.all.PicUpdateDate‘+Index+‘.value="‘+oCreated.toLocaleString()+‘"‘);
                     }
                    else{
                     if(image.height>80){ 
                     ImgD.height=80;
                     ImgD.width=(image.width*80)/image.height;    
                     }else{
                     ImgD.width=image.width; 
                     ImgD.height=image.height;
                     }
                     ImgD.alt="图片大小(宽*高):
            "+image.width+"×"+image.height+"\n图片大小: "+image.fileSize+"\n图片路径:
            "+image.src;
                     eval(‘document.all.width‘+Index+‘.value=‘+image.width);
                     eval(‘document.all.height‘+Index+‘.value=‘+image.height);
                     var oCreated=new Date(image.fileModifiedDate);
                    
                    
            eval(‘document.all.PicUpdateDate‘+Index+‘.value="‘+oCreated.toLocaleString()+‘"‘);
                     }
                    
                    }
                           
                      if(parseInt(Index)==parseInt(form1.upcount.value)){
                            form1.upcount.value=parseInt(form1.upcount.value)+1;
                            str+=‘<table width="100%" ><tr valign="middle" ><td
            align="center" id="tdimg" height="" width="120" ></td><td
            id="tdfile" >文件‘+(parseInt(Index)+1)+‘:<input
            onpropertychange="FileChange(this);" type="file"
            name="file‘+(parseInt(Index)+1)+‘" style="width:275" ><input
            id="width‘+(parseInt(Index)+1)+‘"
            name="width‘+(parseInt(Index)+1)+‘"  type="hidden" value=""><input
            id="height‘+(parseInt(Index)+1)+‘"
            name="height‘+(parseInt(Index)+1)+‘"  type="hidden" value=""><input
            name="PicUpdateDate‘+(parseInt(Index)+1)+‘" type="hidden"
            id="PicUpdateDate‘+(parseInt(Index)+1)+‘"></td></tr></table>‘;
                           
            window.upid.insertAdjacentHTML("beforeEnd",str+‘<br>‘);
                        }
                      gUploadSize+=parseFloat(image.fileSize);
                       }
                ////////////////////////////////////////// 
                  function AlbumChange(Value){
                    if(Value==‘0‘){
                    document.all.sNewAlbum.style.display=‘inline‘;
                    document.all.NewAlbum.focus();
                    }
                    else{
                    document.all.sNewAlbum.style.display=‘none‘;
                    }
                    return ;
                  }
                 
                 
            function CheckIfEnglish( String )
            {
                var Letters =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-_.";
                 var i;
                 var c;
                  if(String.charAt( 0 )==‘-‘)
                return false;
                  if( String.charAt( String.length - 1 ) == ‘-‘ )
                      return false;
                 for( i = 0; i < String.length; i ++ )
                 {
                      c = String.charAt( i );
                  if (Letters.indexOf( c ) < 0)
                     return false;
                 }
                 return true;
            }
            </SCRIPT>
            </head>
            <body >
            <form name="form1" method="post" action="">
              <TABLE align=center bgColor=#cccccc border=0
                                            borderColorDark=#cccccc
            borderColorLight=#000000
                                            cellPadding=5 cellSpacing=1
            height=367
                                            width="500">
                <TBODY>
                  <TR vAlign=center>
                    <TD align=left bgColor=#ffffff colSpan=2
                                            height=269 id=upid vAlign=top>
            <TABLE cellPadding=3 cellSpacing=1 width="100%">
                        <TBODY>
                          <TR vAlign=center>
                            <TD align=middle bgColor=#ffffff id=tdimg
                                            width=120></TD>
                            <TD bgColor=#ffffff id=tdfile>文件1:
                              <INPUT
                                            name=file1
            onpropertychange=FileChange(this);
                                            style="WIDTH: 275px" type=file>
            <INPUT id=width1
                                            name=width1 type=hidden> <INPUT
            id=height1
                                            name=height1 type=hidden> <INPUT
                                            id=PicUpdateDate1
            name=PicUpdateDate1
                                            type=hidden></TD>
                          </TR>
                        </TBODY>
                      </TABLE></TD>
                  </TR>
                  <TR bgColor=#eeeeee vAlign=center>
                    <TD align=middle bgColor=#ebebeb colSpan=2
                                            height=24> <DIV
            align=left>将图片上传至已有相册
                        <SELECT id=OldAlbum
                                            name=OldAlbum
            onchange=AlbumChange(this.value);>
                          <OPTION value=0><新建相册></OPTION>
                          <OPTION
                                            selected value=365>临时相册</OPTION>
                        </SELECT>
                        <INPUT
                                            id=TempAlbum name=TempAlbum
            type=hidden
                                            value=365>
                        <SPAN id=sNewAlbum
                                            style="DISPLAY: none">或新建相册
                        <INPUT id=NewAlbum
                                            maxLength=50 name=NewAlbum
            onfocus="">
                        </SPAN></DIV></TD>
                  </TR>
                  <TR bgColor=#eeeeee vAlign=center>
                    <TD align=middle bgColor=#ebebeb colSpan=2
                                            height=24> <DIV align=center><FONT
            size=2>
                        <INPUT class=bt name=Submit onclick=validate();
            type=button value="· 上传已选图片 ·">
                        <INPUT id=upcount name=upcount type=hidden
                                            value=1>
                        <INPUT id=from name=from type=hidden>
                        </FONT></DIV></TD>
                  </TR>
                </TBODY>
              </TABLE>
            </form>
            </body>
            </html>
            11，不同的ALT
            <SCRIPT language=JavaScript1.2>
            <!--
            tPopWait=50;
            tPopShow=50000;
            showPopStep=10;
            popOpacity=100;
            sPop=null;
            curShow=null;
            tFadeOut=null;
            tFadeIn=null;
            tFadeWaiting=null;
            document.write("<style type=‘text/css‘id=‘defaultPopStyle‘>");
            document.write(".cPopText { background-color: #FFFFFF; border: 1px
            #000000 solid; font-size: 12px; padding-right: 4px; padding-left:
            4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter:
            Alpha(Opacity=0)}");
            document.write("</style>");
            document.write("<div id=‘dypopLayer‘
            style=‘position:absolute;z-index:1000;‘ class=‘cPopText‘></div>");
            function showPopupText(){
            var o=event.srcElement;
            MouseX=event.x;
            MouseY=event.y;
            if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
            if(o.dypop!=sPop) {
            sPop=o.dypop;
            clearTimeout(curShow);
            clearTimeout(tFadeOut);
            clearTimeout(tFadeIn);
            clearTimeout(tFadeWaiting);
            if(sPop==null || sPop=="") {
            dypopLayer.innerHTML="";
            dypopLayer.style.filter="Alpha()";
            dypopLayer.filters.Alpha.opacity=0;
            }
            else {
            if(o.dyclass!=null) popStyle=o.dyclass
            else popStyle="cPopText";
            curShow=setTimeout("showIt()",tPopWait);
            }
            }
            }
            function showIt(){
            dypopLayer.className=popStyle;
            dypopLayer.innerHTML=sPop;
            popWidth=dypopLayer.clientWidth;
            popHeight=dypopLayer.clientHeight;
            if(MouseX+12+popWidth>document.body.clientWidth)
            popLeftAdjust=-popWidth-24
            else popLeftAdjust=0;
            if(MouseY+12+popHeight>document.body.clientHeight)
            popTopAdjust=-popHeight-24
            else popTopAdjust=0;
            dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
            dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
            dypopLayer.style.filter="Alpha(Opacity=0)";
            fadeOut();
            }
            function fadeOut(){
            if(dypopLayer.filters.Alpha.opacity<popOpacity) {
            dypopLayer.filters.Alpha.opacity+=showPopStep;
            tFadeOut=setTimeout("fadeOut()",1);
            }
            else {
            dypopLayer.filters.Alpha.opacity=popOpacity;
            tFadeWaiting=setTimeout("fadeIn()",tPopShow);
            }
            }
            function fadeIn(){
            if(dypopLayer.filters.Alpha.opacity>0) {
            dypopLayer.filters.Alpha.opacity-=1;
            tFadeIn=setTimeout("fadeIn()",1);
            }
            }
            document.onmouseover=showPopupText;
            //-->
            </script>
            <img src="images/logo.gif" alt="网页教学网">