网页中的图片的处理方法与代码
网页中的图片的处理方法与代码
发布时间:2016-12-30 来源:查字典编辑
摘要:1掉链接的图片处理2自动缩小大图经常看到一些图片很大,上传后显示会撑满屏幕。下面的例子通过检测图片的宽度,如果该图片的宽度大于“屏幕宽度-3...

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 去掉热点地图上的区域线框与超链接的线框

复制代码 代码如下:

<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"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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类