網(wǎng)頁中的圖片的處理方法與代碼
更新時間:2009年11月26日 01:23:06 作者:
昨天的一篇 圖片的alt屬性 文章評論中的啟發(fā),特將網(wǎng)頁中的圖片的一些處理方法 小小的總結一下
1 掉鏈接的圖片處理
<img src="no.jpg" onerror="this.src='images/new.gif'">
2 自動縮小大圖
經(jīng)??吹揭恍﹫D片很大,上傳后顯示會撐滿屏幕。下面的例子通過檢測圖片的寬度,如果該圖片的寬度大于“屏幕寬度-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 去掉熱點地圖上的區(qū)域線框與超鏈接的線框
<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>
<img src="no.jpg" onerror="this.src='images/new.gif'">
2 自動縮小大圖
經(jīng)??吹揭恍﹫D片很大,上傳后顯示會撐滿屏幕。下面的例子通過檢測圖片的寬度,如果該圖片的寬度大于“屏幕寬度-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 去掉熱點地圖上的區(qū)域線框與超鏈接的線框
復制代碼 代碼如下:
<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>