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

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.width=document.images.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=\\\"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=\\\"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=\\\"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=\\\"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="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="网页教学网">