網頁圖片處理代碼全集整理

　　 

1，掉鏈級圖片的替代圖片

<img src="no.jpg" onerror="this.src='images/logo.gif'"><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

　　2，自動縮小大圖

　　經?？吹揭恍﹫D片很大，上傳后顯示會撐滿屏幕下面的例子通過檢測if(this.width>screen.width-350)then(this.width=screen.width-350)如果該圖片的寬度大于“屏幕寬度-350”，則讓該圖就顯示“屏幕寬度-350”這么大小。

原圖<br><br /> <img src="jsimg/wallpaper.jpg"><br><br /> 設定大小的圖<br><br /> <img src="jsimg/wallpaper.jpg" onload="<STRONG><A href="http://www.kjueaiud.com/html/54/category-catid-154.html" target="_blank" >java</A></STRONG>script:if(this.width>screen.width-350)this.width=screen.width-350"><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

　　3，禁止IE6中大尺寸圖片的自動縮小

原圖,會自動縮小<br><br /> <img src="jsimg/wallpaper.jpg"> <br><br /> 設定不縮小<br><br /> <img src="jsimg/wallpaper.jpg" galleryimg="no"><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

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><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

6,可控制上傳圖片的大小

<script language="<STRONG><A href="http://www.kjueaiud.com/html/54/category-catid-154.html" target="_blank" >Java</A></STRONG>Script"><br /> <br /> function orsc()<br /> {<br /> if(img.readyState!="complete")return false;<br /> if(img.offsetWidth!=132&&img.offsetHeight!=99){<br /> alert("您選擇的圖片大?。?+img.offsetWidth+"X"+img.offsetHeight+"\n"+"請選擇132X99大小的圖片")<br /> imgT=true;<br /> }<br /> //alert("圖片大?。?+img.offsetWidth+"X"+img.offsetHeight);<br /> //alert("圖片尺寸："+img.fileSize);<br /> }<br /> function mysubmit(theform)<br /> {<br /> if(theform.file1.value=="")<br /> {<br /> alert("請點擊瀏覽按鈕，選擇您要上傳的JPG或GIF文件!")<br /> theform.file1.focus;<br /> return (false);<br /> }<br /> else<br /> {<br /> str= theform.file1.value;<br /> strs=str.toLowerCase();<br /> lens=strs.length;<br /> extname=strs.substring(lens-4,lens);<br /> if(extname!=".jpg" && extname!=".gif")<br /> {<br /> alert("請選擇JPG或GIF格式的文件!");<br /> return (false);<br /> }else{<br /> document.all("loadImg").src=theform.file1.value<br /> if(document.all("loadImg").offsetWidth!=132&&document.all("loadImg").offsetHeight!=99){<br /> alert("您選擇的圖片大?。?+document.all("loadImg").offsetWidth+"X"+document.all("loadImg").offsetHeight+"\n"+"請選擇132X99大小的圖片")<br /> return (false)<br /> }<br /> }<br /> <br /> }<br /> <br /> }<br /> </script><br /> <form onSubmit="return mysubmit(this)" name="form" method="post" enctype="multipart/form-data"><br /> <table width="100%" border=0 cellspacing=0 cellpadding=0><br /> <tr><<STRONG><A href="http://www.kjueaiud.com/html/11/category-catid-111.html" target="_blank" >td</A></STRONG> valign=top height=30><br /> <input type="hidden" name="act" value="upload"><br /> <input type="file" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FA<STRONG><A href="http://www.kjueaiud.com/html/09/category-catid-109.html" target="_blank" >MI</A></STRONG>LY: "MS Shell Dlg", ","Tahoma", ","宋體"; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 1px<br /> " name="file1" value=""> <br /> <input type="submit" name="Submit" value="上傳" > <br /> </td><br /> </tr><br /> </table><br /> <img id=loadImg><br /> </form>  [Ctrl+A 全選,提示:你可修改代碼后運行]

7,檢測一個圖片的長寬尺寸

<script><br /> var img=null;<br /> function s()<br /> {<br /> if(img)img.removeNode(true);<br /> img=document.createElement("img");<br /> img.style.position="absolute";<br /> img.style.visibility="hidden";<br /> img.attachEvent("onreadystatechange",orsc);<br /> img.attachEvent("onerror",oe);<br /> document.body.insertAdjacentElement("beforeend",img);<br /> img.src=inp.value;<br /> }<br /> function oe()<br /> {<br /> alert("c<STRONG><A href="http://www.kjueaiud.com/html/57/category-catid-457.html" target="_blank" >ant</A></STRONG> load img");<br /> }<br /> function orsc()<br /> {<br /> if(img.readyState!="complete")return false;<br /> alert("高:"+img.offsetHeight+"\n寬:"+img.offsetWidth);<br /> }<br /> </script><br /> <input type="file" Name="file" id="inp" value="默認值"><br><input onclick="s()" type="button" value="點我一下給出要上傳圖片的大小及長、寬" name="button"><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

8,按比例縮小

<script defer><br /> for (var i=0;i<document.images.length;i++){<br /> document.images[i].width=document.images[i].width*0.5<br /> }<br /> </script><br /> <img src="img/wallpaper.jpg"> <br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

9,類似Acdsee看大圖的時的拖動

<html><br /> <head><br /> <title>Untitled Document</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /> <br /> <script language="JavaScript"><br /> <!--<br /> var scrollcount=0;<br /> var dragy;<br /> var scrollarrowtop;<br /> <br /> function initdrag() {<br /> scrollcount=1;<br /> dragy=event.clientY;<br /> document.body.setCapture();<br /> }<br /> <br /> function startdrag() {<br /> if (scrollcount==1) {<br /> window.scrollBy(dragy-event.clientX,dragy-event.clientY);<br /> document.body.style.cursor='hand';<br /> dragy=event.clientY;<br /> }<br /> }<br /> function enddrag() {<br /> document.body.style.cursor='';<br /> scrollcount=0;<br /> document.body.releaseCapture();<br /> }<br /> // --><br /> </script><br /> </head><br /> <br /> <body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;" onmousedown="initdrag()" onmousemove="startdrag()" onmouseup="enddrag()" scroll=yes><br /> <br /> <img src="img/wallpaper.jpg"> <br /> <img src="img/whitney.jpg"><br /> <br /> </body><br /> </html><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

10,選擇圖片產生縮略圖，最多10個

<html><br /> <head><br /> <title>Upload Image</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /> <SCRIPT language=Javascript><br /> gFlag=false;<br /> var gMaxSize,gCurrentSize,gUploadSize,gCurInputIndex,gCurImageSrc,gCurOFile;<br /> gMaxSize="10";<br /> gCurrentSize=".18";<br /> gMaxSize=parseFloat(gMaxSize)*1024*1024;<br /> //gMaxSize=parseFloat("1")*1024;<br /> gCurrentSize=parseFloat(gCurrentSize)*1024*1024;<br /> gErr="";<br /> gUploadSize=0;<br /> ////////////////////////////////////////////////////<br /> function validate()<br /> {<br /> var lErr;<br /> lErr="";<br /> if((gUploadSize+gCurrentSize)>gMaxSize){<br /> if(form1.TempAlbum.value!=form1.OldAlbum.value){<br /> lErr=".您要上傳的圖片尺寸大于您的剩余相冊容量,請選擇上傳至\"臨時相冊\"\n"+lErr;<br /> }<br /> }<br /> <br /> if(form1.OldAlbum.value=="0"){<br /> if(form1.NewAlbum.value.length==0){<br /> lErr=".請輸入新相冊名稱\n"+lErr;<br /> }<br /> }<br /> if(lErr.length>0){<br /> alert("錯誤:\n"+lErr);<br /> if(lErr.indexOf("請輸入新相冊名稱\n\n")!=-1){<br /> form1.NewAlbum.focus();<br /> }<br /> return false;<br /> }<br /> <br /> <br /> form1.submit();<br /> /*進度條控制*/<br /> //var winProgress=window.open("progress.htm","progress","width=300,height=250");<br /> //winProgress.focus();<br /> /*進度條控制*/<br /> <br /> return true;<br /> }<br /> <br /> function handleBadImage() {<br /> alert('所選圖片并非有效的JPG格式!\n請重新選擇!');<br /> eval("form1.file"+gCurInputIndex+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+gCurInputIndex+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");<br /> eval("form1.file"+gCurInputIndex+".fireEvent(\"onChange\")");<br /> <br /> return false;<br /> }<br /> <br /> function handleGoodImage() {<br /> imgsrc='<img src="'+gCurImageSrc+'" onload="DrawImage(this,'+gCurInputIndex+'); " width="0" height="0">';<br /> gCurOFile.parentNode.previousSibling.innerHTML=imgsrc;<br /> return true;<br /> }<br /> ////////////////////////////////////////// <br /> function FileChange(oFile){<br /> gErr="";<br /> gUploadSize=0;<br /> str='';<br /> gCurOFile=oFile;<br /> gCurImageSrc=oFile.value;<br /> inputname=oFile.name;<br /> i=inputname.substr((inputname.length-1),1);<br /> gCurInputIndex=i;<br /> <br /> if (gCurImageSrc.length>0){<br /> //check for none jpg<br /> imgExt=new Image();<br /> imgExt.onload=handleGoodImage;<br /> imgExt.onerror=handleBadImage;<br /> var fileName = gCurImageSrc.replace("\\", "/"); // NN7<br /> var imgURL = 'file:///' + fileName;<br /> <br /> if((navigator.appVersion.indexOf('Mac')>-1) && (navigator.appVersion.indexOf('MSIE')>-1)){<br /> imgURL='file://' + fileName;<br /> }<br /> imgExt.src=imgURL;<br /> //finish check<br /> <br /> }<br /> <br /> }<br /> <br /> function ShowImgOfServer(NewPath,ImgD){<br /> ImgD.src=NewPath;<br /> }<br /> <br /> ///////////////////////////////////// <br /> function DrawImage(ImgD,Index){<br /> var flag=false;<br /> var image=new Image();<br /> image.src=ImgD.src;<br /> ImgD.value=ImgD.src;<br /> if(image.fileSize>2048000){<br /> image.outerHTML="";<br /> gErr+="此圖片尺寸過大,圖片尺寸應小于2MB\n";<br /> eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");<br /> eval("form1.file"+Index+".fireEvent(\"onChange\")");<br /> alert("此圖片尺寸過大,圖片尺寸應小于2MB\n");<br /> return ;<br /> }<br /> if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){<br /> image.outerHTML="";<br /> gErr+="此圖片類型不匹配,只能上傳JPG(JPEG)格式文件\n";<br /> eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");<br /> eval("form1.file"+Index+".fireEvent(\"onChange\")");<br /> alert("此圖片類型不匹配,只能上傳JPG(JPEG)格式文件\n");<br /> return ;<br /> }<br /> tempFileName=image.src;<br /> var iLastDot;<br /> iLastLine=tempFileName.lastIndexOf('/');<br /> if(iLastLine!=-1){<br /> tempFileName=tempFileName.substring(iLastLine+1,tempFileName.length);<br /> }<br /> if(!CheckIfEnglish(tempFileName)){<br /> image.outerHTML="";<br /> gErr+="此圖片文件名包含中文或其他不合法字符\n文件名只能由'a-z'、'A-Z'、'_'、'-'構成\n";<br /> eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");<br /> eval("form1.file"+Index+".fireEvent(\"onChange\")");<br /> alert("此圖片文件名包含中文或其他不合法字符\n文件名只能由'a-z'、'A-Z'、'_'、'-'構成\n");<br /> return ;<br /> }<br /> <br /> if(gErr.length>0){<br /> return;<br /> }<br /> if(image.width>0 && image.height>0){<br /> flag=true;<br /> if(image.width/image.height>= 120/80){<br /> if(image.width>120){ <br /> ImgD.width=120;<br /> ImgD.height=(image.height*120)/image.width;<br /> }else{<br /> ImgD.width=image.width; <br /> ImgD.height=image.height;<br /> }<br /> ImgD.alt="圖片大小(寬*高): "+image.width+"×"+image.height+"\n圖片大小: "+image.fileSize+"\n圖片路徑: "+image.src;<br /> eval('document.all.width'+Index+'.value='+image.width);<br /> eval('document.all.height'+Index+'.value='+image.height);<br /> var oCreated=new Date(image.fileModifiedDate);<br /> eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"');<br /> }<br /> else{<br /> if(image.height>80){ <br /> ImgD.height=80;<br /> ImgD.width=(image.width*80)/image.height; <br /> }else{<br /> ImgD.width=image.width; <br /> ImgD.height=image.height;<br /> }<br /> ImgD.alt="圖片大小(寬*高): "+image.width+"×"+image.height+"\n圖片大小: "+image.fileSize+"\n圖片路徑: "+image.src;<br /> eval('document.all.width'+Index+'.value='+image.width);<br /> eval('document.all.height'+Index+'.value='+image.height);<br /> var oCreated=new Date(image.fileModifiedDate);<br /> <br /> eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"');<br /> }<br /> <br /> }<br /> <br /> if(parseInt(Index)==parseInt(form1.upcount.value)){<br /> form1.upcount.value=parseInt(form1.upcount.value)+1;<br /> 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>';<br /> window.upid.insertAdjacentHTML("beforeEnd",str+'<br>');<br /> }<br /> <br /> gUploadSize+=parseFloat(image.fileSize);<br /> } <br /> ////////////////////////////////////////// <br /> function AlbumChange(Value){<br /> if(Value=='0'){<br /> document.all.sNewAlbum.style.display='inline';<br /> document.all.NewAlbum.focus();<br /> }<br /> else{<br /> document.all.sNewAlbum.style.display='none';<br /> }<br /> return ;<br /> }<br /> <br /> <br /> function CheckIfEnglish( String )<br /> { <br /> var Letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-_.";<br /> var i;<br /> var c;<br /> if(String.charAt( 0 )=='-')<br /> return false;<br /> if( String.charAt( String.length - 1 ) == '-' )<br /> return false;<br /> for( i = 0; i < String.length; i ++ )<br /> {<br /> c = String.charAt( i );<br /> if (Letters.indexOf( c ) < 0)<br /> return false;<br /> }<br /> return true;<br /> }<br /> </SCRIPT><br /> </head><br /> <body ><br /> <form name="form1" method="post" action=""><br /> <TABLE align=center bgColor=#<STRONG><A href="http://www.kjueaiud.com/ceshi/ceshijishu/rjcsgj/rational/<STRONG><A href="http://www.kjueaiud.com/ceshi/ceshijishu/rjcsgj/rational/clearcase/" target="_blank" >clearcase</A></STRONG>/" target="_blank" >cc</A></STRONG>cccc border=0 <br /> borderColorDark=#cccccc borderColorLight=#000000 <br /> cellPadding=5 cellSpacing=1 height=367 <br /> width="500"><br /> <TBODY><br /> <TR vAlign=center> <br /> <TD align=left bgColor=#ffffff colSpan=2 <br /> height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%"><br /> <TBODY><br /> <TR vAlign=center> <br /> <TD align=middle bgColor=#ffffff id=tdimg <br /> width=120></TD><br /> <TD bgColor=#ffffff id=tdfile>文件1: <br /> <INPUT <br /> name=file1 onpropertychange=FileChange(this); <br /> style="WIDTH: 275px" type=file> <INPUT id=width1 <br /> name=width1 type=hidden> <INPUT id=height1 <br /> name=height1 type=hidden> <INPUT <br /> id=PicUpdateDate1 name=PicUpdateDate1 <br /> type=hidden></TD><br /> </TR><br /> </TBODY><br /> </TABLE></TD><br /> </TR><br /> <TR bgColor=#eeeeee vAlign=center> <br /> <TD align=middle bgColor=#ebebeb colSpan=2 <br /> height=24> <DIV align=left>將圖片上傳至已有相冊 <br /> <SELECT id=OldAlbum <br /> name=OldAlbum onchange=AlbumChange(this.value);><br /> <OPTION value=0><新建相冊></OPTION><br /> <OPTION <br /> selected value=365>臨時相冊</OPTION><br /> </SELECT><br /> <INPUT <br /> id=TempAlbum name=TempAlbum type=hidden <br /> value=365><br /> <SPAN id=sNewAlbum <br /> style="DISPLAY: none">或新建相冊 <br /> <INPUT id=NewAlbum <br /> maxLength=50 name=NewAlbum onfocus=""><br /> </SPAN></DIV></TD><br /> </TR><br /> <TR bgColor=#eeeeee vAlign=center> <br /> <TD align=middle bgColor=#ebebeb colSpan=2 <br /> height=24> <DIV align=center><FONT size=2> <br /> <INPUT class=bt name=Submit onclick=validate(); type=button value="? 上傳已選圖片 ?"><br /> <INPUT id=upcount name=upcount type=hidden <br /> value=1><br /> <INPUT id=from name=from type=hidden><br /> </FONT></DIV></TD><br /> </TR><br /> </TBODY><br /> </TABLE><br /> </form><br /> </body><br /> </html><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

11,不同的ALT

<SCRIPT language=JavaScript1.2><br /> <!--<br /> tPopWait=50;<br /> tPopShow=50000;<br /> showPopStep=10;<br /> popOpacity=100;<br /> <br /> sPop=null;<br /> curShow=null;<br /> tFadeOut=null;<br /> tFadeIn=null;<br /> tFadeWaiting=null;<br /> <br /> document.write("<style type='text/css'id='defaultPopStyle'>");<br /> 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)}");<br /> document.write("</style>");<br /> document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");<br /> <br /> function showPopupText(){<br /> var o=event.srcElement;<br /> MouseX=event.x;<br /> MouseY=event.y;<br /> if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};<br /> if(o.dypop!=sPop) {<br /> sPop=o.dypop;<br /> clearTimeout(curShow);<br /> clearTimeout(tFadeOut);<br /> clearTimeout(tFadeIn);<br /> clearTimeout(tFadeWaiting); <br /> if(sPop==null || sPop=="") {<br /> dypopLayer.innerHTML="";<br /> dypopLayer.style.filter="Alpha()";<br /> dypopLayer.filters.Alpha.opacity=0; <br /> }<br /> else {<br /> if(o.dyclass!=null) popStyle=o.dyclass <br /> else popStyle="cPopText";<br /> curShow=setTimeout("showIt()",tPopWait);<br /> }<br /> <br /> }<br /> }<br /> <br /> function showIt(){<br /> dypopLayer.className=popStyle;<br /> dypopLayer.innerHTML=sPop;<br /> popWidth=dypopLayer.clientWidth;<br /> popHeight=dypopLayer.clientHeight;<br /> if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24<br /> else popLeftAdjust=0;<br /> if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24<br /> else popTopAdjust=0;<br /> dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;<br /> dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;<br /> dypopLayer.style.filter="Alpha(Opacity=0)";<br /> fadeOut();<br /> }<br /> <br /> function fadeOut(){<br /> if(dypopLayer.filters.Alpha.opacity<popOpacity) {<br /> dypopLayer.filters.Alpha.opacity+=showPopStep;<br /> tFadeOut=setTimeout("fadeOut()",1);<br /> }<br /> else {<br /> dypopLayer.filters.Alpha.opacity=popOpacity;<br /> tFadeWaiting=setTimeout("fadeIn()",tPopShow);<br /> }<br /> }<br /> <br /> function fadeIn(){<br /> if(dypopLayer.filters.Alpha.opacity>0) {<br /> dypopLayer.filters.Alpha.opacity-=1;<br /> tFadeIn=setTimeout("fadeIn()",1);<br /> }<br /> }<br /> document.onmouseover=showPopupText;<br /> //--><br /> </script><br /> <img src="images/logo.gif" alt="網頁教學網"><br />  [Ctrl+A 全選,提示:你可修改代碼后運行]

原文轉自：http://www.kjueaiud.com