网页图片处理代码全集整理

网页

1,掉链级图片的替代图片

<img src="http://www.webjx.com/htmldata/2005-04-02/no.jpg" onerror="this.src='http://www.webjx.com/htmldata/2005-04-02/http://www.webjx.com/htmldata/2005-04-02/images/logo.gif'">
 [Ctrl+A 全选,提示:你可修改代码后运行]

  2,自动缩小大图
  经常看到一些图片很大,上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”,则让该图就显示“屏幕宽度-350”这么大小。

原图<br><img src="http://www.webjx.com/htmldata/2005-04-02/jshttp://www.webjx.com/htmldata/2005-04-02/img/wallpaper.jpg"><br>设定大小的图<br><img src="http://www.webjx.com/htmldata/2005-04-02/jshttp://www.webjx.com/htmldata/2005-04-02/img/wallpaper.jpg" >
 [Ctrl+A 全选,提示:你可修改代码后运行]

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

原图,会自动缩小<br><img src="http://www.webjx.com/htmldata/2005-04-02/jshttp://www.webjx.com/htmldata/2005-04-02/img/wallpaper.jpg"> <br>设定不缩小<br><img src="http://www.webjx.com/htmldata/2005-04-02/jshttp://www.webjx.com/htmldata/2005-04-02/img/wallpaper.jpg" galleryimg="no">
 [Ctrl+A 全选,提示:你可修改代码后运行]

4,去掉用IE6.0浏览图片,当鼠标放到图片上时出现快捷工具(打印、邮寄、另存等)

方法一:
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二:
<img galleryimg="no">
定义CSS:
<style>
img {nobar:expression(this.galleryImg='no')}
</style>

5,去掉热点地图上的区域线框与超链接的线框

<a href="#" onFocus=this.blur()><img src="http://www.webjx.com/htmldata/2005-04-02/jsimg/marylin.jpg" border=0></a>
 [Ctrl+A 全选,提示:你可修改代码后运行]

6,可控制上传图片的大小

<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.valueif(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 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>
 [Ctrl+A 全选,提示:你可修改代码后运行]

7,检测一个图片的长宽尺寸

<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="默认值"><br><input type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">
 [Ctrl+A 全选,提示:你可修改代码后运行]

8,按比例缩小

<script defer>for (var i=0;i<document.images.length;i++){document.images[i].width=document.images[i].width*0.5}</script><img src="http://www.webjx.com/htmldata/2005-04-02/img/wallpaper.jpg">
 [Ctrl+A 全选,提示:你可修改代码后运行]

9,类似Acdsee看大图的时的拖动

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script language="JavaScript"><!--var scrollcount=0;var dragy;var scrollarrowtop;function initdrag() {scrollcount=1;dragy=event.clientY;document.body.setCapture();}function startdrag() {if (scrollcount==1) {window.scrollBy(dragy-event.clientX,dragy-event.clientY);document.body.style.cursor='hand';dragy=event.clientY;}}function enddrag() {document.body.style.cursor='';scrollcount=0;document.body.releaseCapture();}// --></script></head><body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;" onmousemove="startdrag()" scroll=yes><img src="http://www.webjx.com/htmldata/2005-04-02/img/wallpaper.jpg"> <img src="http://www.webjx.com/htmldata/2005-04-02/img/whitney.jpg"></body></html>
 [Ctrl+A 全选,提示:你可修改代码后运行]

10,选择图片产生缩略图,最多10个

<html><head><title>Upload Image</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><SCRIPT language=Javascript>gFlag=false;var gMaxSize,gCurrentSize,gUploadSize,gCurInputIndex,gCurImageSrc,gCurOFile;gMaxSize="10";gCurrentSize=".18";gMaxSize=parseFloat(gMaxSize)*1024*1024;//gMaxSize=parseFloat("1")*1024;gCurrentSize=parseFloat(gCurrentSize)*1024*1024;gErr="";gUploadSize=0;//////////////////////////////////////////////////// function validate() { var lErr; lErr=""; if((gUploadSize+gCurrentSize)>gMaxSize){ if(form1.TempAlbum.value!=form1.OldAlbum.value){ lErr=".您要上传的图片尺寸大于您的剩余相册容量,请选择上传至\"临时相册\"\n"+lErr; } } if(form1.OldAlbum.value=="0"){ if(form1.NewAlbum.value.length==0){ lErr=".请输入新相册名称\n"+lErr; } } if(lErr.length>0){ alert("错误:\n"+lErr); if(lErr.indexOf("请输入新相册名称\n\n")!=-1){ form1.NewAlbum.focus(); } return false; } form1.submit(); /*进度条控制*/ //var winProgress=window.open("progress.htm","progress","width=300,height=250"); //winProgress.focus(); /*进度条控制*/ return true; } function handleBadImage() { alert('所选图片并非有效的JPG格式!\n请重新选择!'); eval("form1.file"+gCurInputIndex+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+gCurInputIndex+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\""); eval("form1.file"+gCurInputIndex+".fireEvent(\"onChange\")"); return false; } function handleGoodImage() { imgsrc='<img src="'+gCurImageSrc+'" width="0" height="0">'; gCurOFile.parentNode.previousSibling.innerHTML=imgsrc; return true; } ////////////////////////////////////////// function FileChange(oFile){ gErr=""; gUploadSize=0; str=''; gCurOFile=oFile; gCurImageSrc=oFile.value; inputname=oFile.name; i=inputname.substr((inputname.length-1),1); gCurInputIndex=i; if (gCurImageSrc.length>0){ //check for none jpg imgExt=new Image(); imgExt.onload=handleGoodImage; imgExt.onerror=handleBadImage; var fileName = gCurImageSrc.replace("\\", "/"); // NN7 var imgURL = 'file:///' + fileName; if((navigator.appVersion.indexOf('Mac')>-1) && (navigator.appVersion.indexOf('MSIE')>-1)){ imgURL='file://' + fileName; } imgExt.src=imgURL; //finish check } } function ShowImgOfServer(NewPath,ImgD){ ImgD.src=NewPath; } ///////////////////////////////////// function DrawImage(ImgD,Index){ var flag=false; var image=new Image(); image.src=ImgD.src; ImgD.value=ImgD.src; if(image.fileSize>2048000){ image.outerHTML=""; gErr+="此图片尺寸过大,图片尺寸应小于2MB\n"; eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\""); eval("form1.file"+Index+".fireEvent(\"onChange\")"); alert("此图片尺寸过大,图片尺寸应小于2MB\n"); return ; } if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){ image.outerHTML=""; gErr+="此图片类型不匹配,只能上传JPG(JPEG)格式文件\n"; eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\""); eval("form1.file"+Index+".fireEvent(\"onChange\")"); alert("此图片类型不匹配,只能上传JPG(JPEG)格式文件\n"); return ; } tempFileName=image.src; var iLastDot; iLastLine=tempFileName.lastIndexOf('/'); if(iLastLine!=-1){ tempFileName=tempFileName.substring(iLastLine+1,tempFileName.length); } if(!CheckIfEnglish(tempFileName)){ image.outerHTML=""; gErr+="此图片文件名包含中文或其他不合法字符\n文件名只能由'a-z'、'A-Z'、'_'、'-'构成\n"; eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\""); eval("form1.file"+Index+".fireEvent(\"onChange\")"); alert("此图片文件名包含中文或其他不合法字符\n文件名只能由'a-z'、'A-Z'、'_'、'-'构成\n"); return ; } if(gErr.length>0){ return; } if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= 120/80){ if(image.width>120){ ImgD.width=120; ImgD.height=(image.height*120)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"\n图片大小: "+image.fileSize+"\n图片路径: "+image.src; eval('document.all.width'+Index+'.value='+image.width); eval('document.all.height'+Index+'.value='+image.height); var oCreated=new Date(image.fileModifiedDate); eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"'); } else{ if(image.height>80){ ImgD.height=80; ImgD.width=(image.width*80)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"\n图片大小: "+image.fileSize+"\n图片路径: "+image.src; eval('document.all.width'+Index+'.value='+image.width); eval('document.all.height'+Index+'.value='+image.height); var oCreated=new Date(image.fileModifiedDate); eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"'); } } if(parseInt(Index)==parseInt(form1.upcount.value)){ form1.upcount.value=parseInt(form1.upcount.value)+1; str+='<table width="100%" ><tr valign="middle" ><td align="center" id="tdimg" height="" width="120" ></td><td id="tdfile" >文件'+(parseInt(Index)+1)+':<input onpropertychange="FileChange(this);" type="file" name="file'+(parseInt(Index)+1)+'" style="width:275" ><input id="width'+(parseInt(Index)+1)+'" name="width'+(parseInt(Index)+1)+'" type="hidden" value=""><input id="height'+(parseInt(Index)+1)+'" name="height'+(parseInt(Index)+1)+'" type="hidden" value=""><input name="PicUpdateDate'+(parseInt(Index)+1)+'" type="hidden" id="PicUpdateDate'+(parseInt(Index)+1)+'"></td></tr></table>'; window.upid.insertAdjacentHTML("beforeEnd",str+'<br>'); } 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"> <TBODY> <TR vAlign=center> <TD align=left bgColor=#ffffff colSpan=2 height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%"> <TBODY> <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> </TBODY> </TABLE></TD> </TR> <TR bgColor=#eeeeee vAlign=center> <TD align=middle bgColor=#ebebeb colSpan=2 height=24> <DIV align=left>将图片上传至已有相册 <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> <SPAN id=sNewAlbum style="DISPLAY: none">或新建相册 <INPUT id=NewAlbum maxLength=50 name=NewAlbum onfocus=""> </SPAN></DIV></TD> </TR> <TR bgColor=#eeeeee vAlign=center> <TD align=middle bgColor=#ebebeb colSpan=2 height=24> <DIV align=center><FONT size=2> <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> </FONT></DIV></TD> </TR> </TBODY> </TABLE></form></body></html>
 [Ctrl+A 全选,提示:你可修改代码后运行]

11,不同的ALT

<SCRIPT language=JavaScript1.2><!--tPopWait=50;tPopShow=50000;showPopStep=10;popOpacity=100;sPop=null;curShow=null;tFadeOut=null;tFadeIn=null;tFadeWaiting=null;document.write("<style type='text/css'id='defaultPopStyle'>");document.write(".cPopText { background-color: #FFFFFF; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");document.write("</style>");document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");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-24else popLeftAdjust=0;if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24else 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<popOpacity) {dypopLayer.filters.Alpha.opacity+=showPopStep;tFadeOut=setTimeout("fadeOut()",1);}else {dypopLayer.filters.Alpha.opacity=popOpacity;tFadeWaiting=setTimeout("fadeIn()",tPopShow);}}function fadeIn(){if(dypopLayer.filters.Alpha.opacity>0) {dypopLayer.filters.Alpha.opacity-=1;tFadeIn=setTimeout("fadeIn()",1);}}document.onmouseover=showPopupText;//--></script><img src="http://www.webjx.com/htmldata/2005-04-02/http://www.webjx.com/htmldata/2005-04-02/images/logo.gif" alt="网页教学网">
 [Ctrl+A 全选,提示:你可修改代码后运行]
时间: 2024-12-11 09:16:03

网页图片处理代码全集整理的相关文章

JavaScript实现网页图片等比例缩放实现代码及调用方式_javascript技巧

在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB

生成幻灯片式的网页图片效果演示

提示:您可以先修改部分代码再运行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>生成幻灯片式的网页图片效果演示</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <MET

ruby实现网页图片抓取

  本文给大家分享的是个人使用ruby编写的抓取网页图片的代码,十分的简单实用,有需要的小伙伴可以参考下. 前段时间看到很多人写的下妹子脚本,自己也写一个 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 module CommonHelper   require 'nokogiri' require 'open-uri'   def down_load_xmz sit

CSS控制图片代码:让网页图片自适应大小

文章简介:CSS控制图片代码:让网页图片自适应大小. 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600

巧用WORD EXCEL批量整理网页图片

  经常遇见这种情况,网页上有很多对自己有用的图片素材,用保存网页的办法保存下载后,在相关文件夹中找到图片素材,确实以无规则的数字命名的图片.如果图片数量少,我们可以一次打开识别,命名,但是数量太多,这种方法不经济.那么时候用更好的批量命名图片的方法? (众多需要重命名的图片) 巧用WORD EXCEL批量整理网页图片步骤 其实我们可以通过Word和Excel工具批量更改图片名称,操作稍微复杂些,但是如果图片比较多,这种方法效率高,能节约不少时间. 1. 理清表格很重要 由于这个页面中所包含的信

网页图片延时加载的js代码_javascript技巧

实现原理  把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var e

网页教学网代码分享:干净简洁的网页列表代码

文章简介:网页教学网代码分享:干净简洁的网页列表代码.  谁不希望有一个好看而又干净的网页列表?这篇文章中我们给出几个实用的例子,你可以把他们直接用到自己的工作中. 我们从一个带有动画效果的垂直列表开始,接着是一个图文混排的例子,然后是一个只有图片的list例子跟一个水平菜单的例子,最后是一个以放大数字开头的列表.对于初学者而言这里可以学到很多东西,对于熟手,直接拿来用就是了. 1.helvetica字体的列表 第一个例子的样式看起平淡无奇,不过喜欢简约风格的人也许会感兴趣,这类似于印刷字体风格

网页播放器代码[最全的播放器使用教程]

教程|网页|播放器 常用网页播放器代码 我们在网页上看到的播放器无外乎WMP/RealOne/Macromedia Flash Player,其他的无非是面板不同,或者添加了其他控件,对于计算机上安装的一些播放器也都是编码和解码器的整合,其最核心的编码和解码技术是相同的.例如:网络上最流行的windows media流(asf,wma,wmv格式...),Real流(rm,rmvb...),还有MPEG系列编码格式(MP4/MP3格式...) Windows Media Video 是微软推出的

用Javascript使网页图片产生旋转效果

javascript|网页|旋转 Rotation滤镜可以使图片产生旋转效果,注意必须是IE5.5及IE6.0才能看到! <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>body img{border:3 gold ridge}</style>//给图片加上边框的CS代码<ti