提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

网页中的图片的处理方法与代码

网页方法代码 处理 图片
2023-06-13 09:14:14 时间
1掉链接的图片处理
<imgsrc="no.jpg"onerror="this.src="images/new.gif"">

2自动缩小大图
经常看到一些图片很大，上传后显示会撑满屏幕。下面的例子通过检测图片的宽度，如果该图片的宽度大于“屏幕宽度-350”，

则让该图就显示“屏幕宽度-350”这么大小。

原图
<imgsrc="jsimg/wallpaper.jpg">
设定大小的图
　　<imgsrc="jsimg/wallpaper.jpg"onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">

3禁止IE6中大尺寸图片的自动缩小　　　

原图,会自动缩小
　　<imgsrc="jsimg/wallpaper.jpg">
　　设定不缩小
　　<imgsrc="jsimg/wallpaper.jpg"galleryimg="no">



4去掉热点地图上的区域线框与超链接的线框
复制代码代码如下:

　<ahref="#"onFocus=this.blur()><imgsrc="jsimg/marylin.jpg"border=0></a>


5可控制上传图片的大小


处理上传图片大小的JS
复制代码代码如下:

<scriptlanguage="JavaScript">
　　functionorsc(){
　　if(img.readyState!="complete")returnfalse;
　　if(img.offsetWidth!=132&&img.offsetHeight!=99){
　　alert("您选择的图片大小："+img.offsetWidth+"X"+img.offsetHeight+"\n"+"请选择132X99大小的图片")
　　imgT=true;
　　}
　　　}
　　functionmysubmit(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>


复制代码代码如下:
<formonSubmit="returnmysubmit(this)"name="form"method="post"enctype="multipart/form-data">
　　<tablewidth="100%"border=0cellspacing=0cellpadding=0>
　　<tr><tdvalign=topheight=30>
　　<inputtype="hidden"name="act"value="upload">
　　<inputtype="file"style="BORDER-TOP-WIDTH:1px;BORDER-LEFT-WIDTH:1px;FONT-SIZE:12px;BORDER-BOTTOM-WIDTH:1px;CURSOR:text;COLOR:#333333;FONT-FAMILY:"MSShellDlg",","Tahoma",","宋体";HEIGHT:20px;BORDER-RIGHT-WIDTH:1px
　　"name="file1"value="">
　　<inputtype="submit"name="Submit"value="上传">
　　</td>　</tr></table>
　　<imgid=loadImg>
</form>

相关文章