網頁中的圖片的處理方法與代碼

2019-11-21 00:57:44

字體：大中小

來源：轉載

供稿：網友

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 去掉熱點地圖上的區域線框與超鏈接的線框

復制代碼代碼如下:

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> 