当前页面: 开发资料首页 → Javascript 专题 → 网页图片处理代码全集整理
网页图片处理代码全集整理
摘要: 网页图片处理代码全集整理
1，掉链级图片的替代图片
<table style="WIDTH: 450px; HEIGHT: 96px" align=center>
<tr> <td><textarea class=editbox style="WIDTH: 443px; HEIGHT: 61px" name=htmlArea rows=4 cols=70> </textarea><input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行]
</td></tr></table>
2，自动缩小大图
经常看到一些图片很大，上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”，则让该图就显示“屏幕宽度-350”这么大小。
<table align=center>
<tr> <td><textarea class=editbox style="WIDTH: 443px; HEIGHT: 98px" name=htmlArea rows=6 cols=70>原图设定大小的图
screen.width-350)this.width=screen.width-350"> </textarea>
<input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr></table>
3，禁止IE6中大尺寸图片的自动缩小
<table align=center>
<tr> <td><textarea class=editbox style="WIDTH: 443px; HEIGHT: 81px" name=htmlArea rows=5 cols=70>原图,会自动缩小设定不缩小
</textarea>
<input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr></table>
4，去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）
方法一：
方法二：
定义CSS：
5，去掉热点地图上的区域线框与超链接的线框
<table align=center>
<input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr></table>
6,可控制上传图片的大小 <table align=center>
<tr> <td><textarea class=editbox name=htmlArea rows=8 cols=70><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; } //alert("图片大小："+img.offsetWidth+"X"+img.offsetHeight); //alert("图片尺寸："+img.fileSize); } 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> </form></textarea><input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr></table>7,检测一个图片的长宽尺寸 <table align=center> <tr> <td><textarea class=editbox name=htmlArea rows=8 cols=70><script> var img=null; function s() { if(img)img.removeNode(true); img=document.createElement("img"); img.style.position="absolute"; img.style.visibility="hidden"; img.attachEvent("onreadystatechange",orsc); img.attachEvent("onerror",oe); document.body.insertAdjacentElement("beforeend",img); img.src=inp.value; } function oe() { alert("cant load img"); } function orsc() { if(img.readyState!="complete")return false; alert("高:"+img.offsetHeight+"\n宽:"+img.offsetWidth); } </script> <input type="file" Name="file" id="inp" value="默认值">
<input onclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button"> </textarea>
<input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行]
</td></tr></table>8,按比例缩小 <table align=center> <tr> <td><textarea class=editbox name=htmlArea rows=8 cols=70><script defer> for (var i=0;i
9,类似Acdsee看大图的时的拖动 <table align=center> <tr> <td><textarea class=editbox name=htmlArea rows=8 cols=70> <head>
<input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr></table>
10,选择图片产生缩略图，最多10个 <table align=center> <tr> <td><textarea class=editbox name=htmlArea rows=8 cols=70> <head>
'); } gUploadSize+=parseFloat(image.fileSize); } ////////////////////////////////////////// function AlbumChange(Value){ if(Value=='0'){ document.all.sNewAlbum.style.display='inline'; document.all.NewAlbum.focus(); } else{ document.all.sNewAlbum.style.display='none'; } return ; } function CheckIfEnglish( String ) { var Letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-_."; var i; var c; if(String.charAt( 0 )=='-') return false; if( String.charAt( String.length - 1 ) == '-' ) return false; for( i = 0; i < String.length; i ++ ) { c = String.charAt( i ); if (Letters.indexOf( c ) < 0) return false; } return true; } </script> </head> <body > <form name="form1" method="post" action=""> <table align=center bgColor=#cccccc border=0 borderColorDark=#cccccc borderColorLight=#000000 cellPadding=5 cellSpacing=1 height=367 width="500"> <tr vAlign=center> <td align=left bgColor=#ffffff colSpan=2 height=269 id=upid vAlign=top> <table cellPadding=3 cellSpacing=1 width="100%"> <tr vAlign=center> <td align=middle bgColor=#ffffff id=tdimg width=120></td> <td bgColor=#ffffff id=tdfile>文件1: <input name=file1 onpropertychange=FileChange(this); style="WIDTH: 275px" type=file> <input id=width1 name=width1 type=hidden> <input id=height1 name=height1 type=hidden> <input id=PicUpdateDate1 name=PicUpdateDate1 type=hidden></td> </tr> </table></td> </tr> <tr bgColor=#eeeeee vAlign=center> <td align=middle bgColor=#ebebeb colSpan=2 height=24>
将图片上传至已有相册
<select id=OldAlbum
name=OldAlbum onchange=AlbumChange(this.value);>
<option value=0><新建相册></option>
<option
selected value=365>临时相册</option>
</select>
<input
id=TempAlbum name=TempAlbum type=hidden
value=365>
或新建相册
<input id=NewAlbum
maxLength=50 name=NewAlbum onfocus="">
</td>
</tr>
<tr bgColor=#eeeeee vAlign=center>
<td align=middle bgColor=#ebebeb colSpan=2
height=24>
<input class=bt name=Submit onclick=validate(); type=button value="· 上传已选图片 ·">
<input id=upcount name=upcount type=hidden
value=1>
<input id=from name=from type=hidden>
</td>
</tr>
</table>
</form>
</body>
</textarea><input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr></table>11,不同的ALT <table align=center> <tr> <td><textarea class=editbox name=htmlArea rows=8 cols=70><script language=JavaScript1.2> tPopWait=50; tPopShow=50000; showPopStep=10; popOpacity=100; sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFadeWaiting=null; document.write(""); document.write(""); function showPopupText(){ var o=event.srcElement; MouseX=event.x; MouseY=event.y; if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; if(o.dypop!=sPop) { sPop=o.dypop; clearTimeout(curShow); clearTimeout(tFadeOut); clearTimeout(tFadeIn); clearTimeout(tFadeWaiting); if(sPop==null || sPop=="") { dypopLayer.innerHTML=""; dypopLayer.style.filter="Alpha()"; dypopLayer.filters.Alpha.opacity=0; } else { if(o.dyclass!=null) popStyle=o.dyclass else popStyle="cPopText"; curShow=setTimeout("showIt()",tPopWait); } } } function showIt(){ dypopLayer.className=popStyle; dypopLayer.innerHTML=sPop; popWidth=dypopLayer.clientWidth; popHeight=dypopLayer.clientHeight; if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 else popLeftAdjust=0; if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 else popTopAdjust=0; dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; dypopLayer.style.filter="Alpha(Opacity=0)"; fadeOut(); } function fadeOut(){ if(dypopLayer.filters.Alpha.opacity
<input class=button1 onclick=runCode() type=button value=" 运行代码 "> [Ctrl+A 全选,提示:你可修改代码后运行] </td></tr>
↑返回目录
前一篇: JS判断两种格式的输入日期的正确性
后一篇: 14 个经典的Javascript代码