有关图片相关的收集-CSDN博客

1，掉链级图片的替代图片
<img src="cnbruce.jpg" οnerrοr="this.src='http://www.cnbruce.com/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.cnbruce.com/images/cnrose/mi.jpg"><br> 设定大小的图<br> <img src="http://www.cnbruce.com/images/cnrose/mi.jpg" οnlοad="javascript:if(this.width>screen.width-350)then(this.width=screen.width-350)">
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

3，禁止IE6中大尺寸图片的自动缩小
原图,会自动缩小<br> <img src="http://www.cnbruce.com/images/cnrose/xx.jpg"> <br> 设定不缩小<br> <img src="http://www.cnbruce.com/images/cnrose/xx.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，去掉热点地图上的区域线框与超链接的线框
使用CSS定义
<style>
a {blr:expression(this.onFocus=this.blur())}
area {blr:expression(this.onFocus=this.blur())}
</style>
或者
<a href="http://www.cnbruce.com/blog/" onFocus=this.blur()><img src="http://www.cnbruce.com/images/logo.gif" border=0></a>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

6,可控制上传图片的大小
<script language="JavaScript"> var img; function test(){ if(img)img.removeNode(true); img=document.createElement('img'); img.style.display='none'; img.attachEvent('onreadystatechange',function(){if(img.readyState=='complete')alert(img.fileSize>1024?'图片尺寸必要小于1024':'OK');}); img.attachEvent('onerror',function(){alert('不能读取此文件')}); document.body.appendChild(img); img.src=file.value; } </script> <input name="file" type='file'><input type="button" value="Test" onClick="test()">
[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 οnclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

按比例缩小
<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.cnbruce.com/images/cnrose/xx.jpg">
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

类似Acdsee看大图的时的拖动
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">  </script> </head> <body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;" οnmοusedοwn="initdrag()" οnmοusemοve="startdrag()" οnmοuseup="enddrag()" scroll=yes> <img src="http://www.cnbruce.com/images/cnrose/mi.jpg"> <img src="http://www.cnbruce.com/images/cnrose/xx.jpg"> </body> </html>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

选择图片产生缩略图，最多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+'" οnlοad="DrawImage(this,'+gCurInputIndex+'); " 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.οnlοad=handleGoodImage; imgExt.οnerrοr=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 οnchange=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 οnfοcus=""> </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 οnclick=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 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

随机图片
<script language=vbs> Randomize i=Int((80 * Rnd) + 1) document.write"<img src='http://www.cnbruce.com/blog/smile/face"&i&".gif'>" </script>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

不同的ALT
<SCRIPT language=JavaScript1.2>  </script> <img src="http://www.cnbruce.com/images/logo.gif" alt="this is cnbruce blog">
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

图片轮流切换
<SCRIPT LANGUAGE="JavaScript" defer> // Set slideShowSpeed (milliseconds) var slideShowSpeed = 2000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = "/blog/smile/face1.gif"; Pic[1] = "/blog/smile/face2.gif"; Pic[2] = "/blog/smile/face3.gif"; Pic[3] = "/blog/smile/face4.gif"; Pic[4] = "/blog/smile/face5.gif"; // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } </script> <body οnlοad="runSlideShow()"> <img id="SlideShow"/>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

图片+文字说明PPT效果
<html> <head> <title>Listing 35.13. A Wipe Transition for the Incoming Slide</title> <script language="JavaScript" type="text/javascript"> // This array holds all of the document's DHTML-able objects var dhtml_objects = new Array() // This function creates the custom objects that serve as cross-browser front-ends function create_object_array() { // All the <div> and <span> tags are stored in these variables var div_tags var span_tags var css_tags // Is the browser W3C DOM compliant? if (document.getElementById) { // If so, use getElementsByTagName() to get the <div> tags div_tags = document.getElementsByTagName("div") // Loop through the <div> tags for (var counter = 0; counter < div_tags.length; counter++) { // Store the current object current_object = div_tags[counter] // Store how the browser accesses styles object_css = current_object.style // Store the object's id object_id = current_object.id // Only store those tags that have an id if (object_id) { // Create a new dhtml_object and store it in dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } // Use getElementsByTagName() to get the <span> tags span_tags = document.getElementsByTagName("span") // Loop through the <span> tags for (var counter = 0; counter < span_tags.length; counter++) { // Store the current object current_object = span_tags[counter] // Store how the browser accesses styles object_css = current_object.style // Store the object's id object_id = current_object.id // Only store those tags that have an id if (object_id) { // Create a new dhtml_object and store it in dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } // Is the browser DHTML DOM compliant? else if (document.all) { // If so, use document.all to get the <div> tags div_tags = document.all.tags("div") // Loop through the <div> tags for (var counter = 0; counter < div_tags.length; counter++) { // Store the current object current_object = div_tags[counter] // Store how the browser accesses styles object_css = current_object.style // Store the object's id object_id = current_object.id // Only store those tags that have an id if (object_id) { // Create a new dhtml_object and store it in dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } // Use document.all to get the <span> tags span_tags = document.all.tags("span") // Loop through the <span> tags for (var counter = 0; counter < span_tags.length; counter++) { // Store the current object current_object = span_tags[counter] // Store how the browser accesses styles object_css = current_object.style // Store the object's id object_id = current_object.id // Only store those tags that have an id if (object_id) { // Create a new dhtml_object and store it in dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } // Is the browser LDOM compliant? else if (document.layers) { // Use document.layers to get the positioned <div> and <span> tags css_tags = document.layers // Loop through the layers for (var counter = 0; counter < css_tags.length; counter++) { // Store the current object current_object = css_tags[counter] // Store how the browser accesses styles object_css = current_object // Store the object's id object_id = current_object.id // Only store those tags that have an id if (object_id) { // Create a new dhtml_object and store it in dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } } function dhtml_object (obj, css, id) { this.obj = obj this.css = css this.id = id this.left = get_left this.right = get_right this.top = get_top this.bottom = get_bottom this.width = get_width this.height = get_height this.visibility = get_visibility this.zIndex = get_zIndex this.move_to = move_to this.move_by = move_by this.set_left = set_left this.set_top = set_top this.set_width = set_width this.set_height = set_height this.set_visibility = set_visibility this.set_zIndex = set_zIndex this.move_above = move_above this.move_below = move_below this.set_backgroundColor = set_backgroundColor this.set_backgroundImage = set_backgroundImage this.set_html = set_html this.get_clip_top = get_clip_top this.get_clip_right = get_clip_right this.get_clip_bottom = get_clip_bottom this.get_clip_left = get_clip_left this.get_clip_width = get_clip_width this.get_clip_height = get_clip_height this.resize_clip_to = resize_clip_to this.resize_clip_by = resize_clip_by } function get_left() { return parseInt(this.css.left) } function get_right() { return this.left() + this.width() } function get_top() { return parseInt(this.css.top) } function get_bottom() { return this.top() + this.height() } function get_width() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, is the width defined? if (this.css.width) { // If so, return the width property return parseInt(this.css.width) } else { // If not, return the offsetWidth property return parseInt(this.obj.offsetWidth) } } else { // If not, return the layer's document width return parseInt(this.obj.document.width) } } function get_height() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, is the height defined? if (this.css.height) { // If so, return the height property return parseInt(this.css.height) } else { // If not, return the offsetHeight property return parseInt(this.obj.offsetHeight) } } else { // If not, return the layer's document height return parseInt(this.obj.document.height) } } function get_visibility() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, is the visibility defined? if (this.css.visibility) { // If so, return the visibility property return this.css.visibility } } else { // Otherwise, it's an LDOM browser, so // handle the proprietary visibility values if (this.css.visibility == "show") { return "visible" } if (this.css.visibility == "hide") { return "hidden" } } // If we get this far, just return "inherit" return "inherit" } function get_zIndex() { return this.css.zIndex } function move_to (new_left, new_top) { this.css.left = new_left this.css.top = new_top } function move_by (delta_left, delta_top) { // Add the delta values this.css.left = this.left() + parseInt(delta_left) this.css.top = this.top() + parseInt(delta_top) } function set_left (new_left) { this.css.left = new_left } function set_top (new_top) { this.css.top = new_top } function set_width (new_width) { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, just set the width property this.css.width = new_width } } function set_height (new_height) { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, just set the width property this.css.height = new_height } } function set_visibility (new_visibility) { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, just set the visibility // to the value of the argument this.css.visibility = new_visibility } else { // Otherwise, set the proprietary visibility values if (new_visibility == "visible") { this.css.visibility = "show" } else if (new_visibility == "hidden") { this.css.visibility = "hide" } else { this.css.visibility = "inherit" } } } function set_zIndex(new_zindex) { // Is the new z-index greater than 0? if (new_zindex > 0) { // If so, set it this.css.zIndex = new_zindex } else { // If not, set it to 0 this.css.zIndex = 0 } } function move_above(reference_object) { this.css.zIndex = reference_object.css.zIndex + 1 } function move_below(reference_object) { // Get the z-index of the reference object reference_zindex = reference_object.css.zIndex // Is it greater than 0? if (reference_zindex > 0) { // If so, set this object's zindex to one less this.css.zIndex = reference_zindex - 1 } else { // If not, set the reference object's z-index to 1 // and this object's z-index to 0 reference_object.css.zIndex = 1 this.css.zIndex = 0 } } function set_backgroundColor(new_color) { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, use the backgroundColor property this.css.backgroundColor = new_color } else { // If not, use the bgcolor property this.css.bgColor = new_color } } function set_backgroundImage(new_image) { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, use the backgroundImage property this.css.backgroundImage = "url(" + new_image + ")" } else { // If not, use the background property this.css.background.src = new_image } } function set_html(new_html) { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, use the innerHTML property this.obj.innerHTML = new_html } else { // If not, use the document.write() method this.obj.document.open() this.obj.document.write(new_html) this.obj.document.close() } } function get_clip_top() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, first parse the clip string parse_dom_clip(this) // Clip values are now in the current_clip object return current_clip.top } else { // Otherwise, use clip.top return this.css.clip.top } } var current_clip function clip_object(top, right, bottom, left) { this.top = top this.right = right this.bottom = bottom this.left = left } function parse_dom_clip(current_object) { clip_string = current_object.css.clip if (clip_string.length > 0) { var values_string = clip_string.slice(5, clip_string.length - 1) var clip_values = values_string.split(" ") var clip_top = parseInt(clip_values[0]) var clip_right = parseInt(clip_values[1]) var clip_bottom = parseInt(clip_values[2]) var clip_left = parseInt(clip_values[3]) } else { var clip_top = 0 var clip_right = current_object.width() var clip_bottom = current_object.height() var clip_left = 0 } current_clip = new clip_object(clip_top, clip_right, clip_bottom, clip_left) } function get_clip_right() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, first parse the clip string parse_dom_clip(this) // Clip values are now in the current_clip object return current_clip.right } else { // Otherwise, use clip.right return this.css.clip.right } } function get_clip_bottom() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, first parse the clip string parse_dom_clip(this) // Clip values are now in the current_clip object return current_clip.bottom } else { // Otherwise, use clip.bottom return this.css.clip.bottom } } function get_clip_left() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, first parse the clip string parse_dom_clip(this) // Clip values are now in the current_clip object return current_clip.left } else { // Otherwise, use clip.left return this.css.clip.left } } function get_clip_width() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, first parse the clip string parse_dom_clip(this) // Clip values are now in the current_clip object return current_clip.right - current_clip.left } else { // Otherwise, use clip.width return this.css.clip.width } } function get_clip_height() { // Is this a W3C or DHTML DOM browser? if (!document.layers) { // If so, first parse the clip string parse_dom_clip(this) // Clip values are now in the current_clip object return current_clip.bottom - current_clip.top } else { // Otherwise, use clip.width return this.css.clip.height } } function resize_clip_to(new_top, new_right, new_bottom, new_left) { if (new_top == "auto") {new_top = this.get_clip_top() } if (new_right == "auto") {new_right = this.get_clip_right() } if (new_bottom == "auto") {new_bottom = this.get_clip_bottom() } if (new_left == "auto") {new_left = this.get_clip_left() } // Is this a W3C or DHTML DOM browser? if (!document.layers) { // Clip values are now in the current_clip object this.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")" } else { // Otherwise, use clip properties this.css.clip.top = new_top this.css.clip.right = new_right this.css.clip.bottom = new_bottom this.css.clip.left = new_left } } function resize_clip_by(delta_top, delta_right, delta_bottom, delta_left) { var new_top = this.get_clip_top() + delta_top var new_right = this.get_clip_right() + delta_right var new_bottom = this.get_clip_bottom() + delta_bottom var new_left = this.get_clip_left() + delta_left // Is this a W3C or DHTML DOM browser? if (!document.layers) { // Clip values are now in the current_clip object this.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")" } else { // Otherwise, use clip properties this.css.clip.top = new_top this.css.clip.right = new_right this.css.clip.bottom = new_bottom this.css.clip.left = new_left } } function get_mouse_x(current_event) { // Is this Internet Explorer 4 or later? if (its_ie4plus) { // If so, return the event.clientX property return event.clientX } // Is this Netscape Explorer 4 or later? else if (its_ns4plus) { // Otherwise, return the pageX property return current_event.pageX } else { // Otherwise, return null return null } } function get_mouse_y(current_event) { // Is this Internet Explorer 4 or later? if (its_ie4plus) { // If so, return the event.clientY property return event.clientY } // Is this Netscape Explorer 4 or later? else if (its_ns4plus) { // If so, return the pageY property return current_event.pageY } else { // Otherwise, return null return null } } function get_client_width() { // Is this Internet Explorer 4 or later? if (its_ie4plus) { // If so, return the clientWidth property return document.body.clientWidth } else if (its_ns4plus) { // If so, return the innerWidth property return window.innerWidth - 18 } else { // Otherwise, return null return null } } function get_client_height() { // Is this Internet Explorer 4 or later? if (its_ie4plus) { // If so, return the clientHeight property return document.body.clientHeight } // Is this Netscape Explorer 4 or later? else if (its_ns4plus) { // If so, return the innerHeight property return window.innerHeight - 18 } else { // Otherwise, return null return null } } function get_client_scroll_left() { // Is this Internet Explorer 4 or later? if (its_ie4plus) { // If so, return the scrollLeft property return document.body.scrollLeft } // Is this Netscape Explorer 4 or later? else if (its_ns4plus) { // If so, return the pageXOffset property return pageXOffset } else { // Otherwise, return null return null } } function get_client_scroll_top() { // Is this Internet Explorer 4 or later? if (its_ie4plus) { // If so, return the scrollTop property return document.body.scrollTop } // Is this Netscape Explorer 4 or later? else if (its_ns4plus) { // If so, return the pageYOffset property return pageYOffset } else { // Otherwise, return null return null } } </script> <script language="JavaScript" type="text/javascript"> // One of these boolean variables will be // set to true based on the browser name var its_ie = false var its_ns = false var its_opera = false var its_webtv = false var its_compatible = false // One of these boolean variables will be set to // true based on the Internet Explorer version var its_ie2 = false var its_ie3 = false var its_ie4 = false var its_ie5 = false var its_ie55 = false var its_ie6 = false var its_ie4plus = false var its_ie5plus = false var its_ie55plus = false var its_ie6plus = false // One of these boolean variables will be set to // true based on the Netscape version var its_ns2 = false var its_ns3 = false var its_ns4 = false var its_ns6 = false var its_ns3plus = false var its_ns4plus = false var its_ns6plus = false // One of these boolean variables will be // set to true based on the operating system var its_win31 = false var its_win95 = false var its_win98 = false var its_winme = false var its_winnt = false var its_win2000 = false var its_winxp = false var its_windows = false var its_win32 = false var its_mac68k = false var its_macppc = false var its_macos = false var its_linux = false var its_other_os = false // This will be true of the browser supports some kind of DHTML var dhtml_ok = false // Let's work with lowercase letters to keep things simple var user_agent = navigator.userAgent.toLowerCase() // BROWSER NAME // Use indexOf() to examine the userAgent string // for telltale signs of the browser name if (user_agent.indexOf("opera") != -1) { its_opera = true } else if (user_agent.indexOf("webtv") != -1) { its_webtv = true } else if (user_agent.indexOf("msie") != -1) { its_ie = true } else if (user_agent.indexOf("mozilla") != -1) { // For "moziila", we need to rule out some other possibilities, first if ((user_agent.indexOf("compatible") == -1) && (user_agent.indexOf("spoofer") == -1) && (user_agent.indexOf("hotjava") == -1)) { its_ns = true } else { its_compatible = true } } // BROWSER VERSION var major_version = parseInt(navigator.appVersion) var full_version = parseFloat(navigator.appVersion) var ie_start = user_agent.indexOf("msie") if (ie_start != -1) { var version_string = user_agent.substring(ie_start + 5) major_version = parseInt(version_string) full_version = parseFloat(version_string) } // INTERNET EXPLORER if (its_ie || its_webtv) { if (major_version < 3) { its_ie2 = true } else if (major_version == 3) { its_ie3 = true } else if (major_version == 4) { its_ie4 = true } else if (major_version == 5) { its_ie5 = true } else if (full_version == 5.5) { its_ie55 = true } else if (major_version == 6) { its_ie6 = true } if (major_version >= 4) { its_ie4plus = true } if (major_version >= 5) { its_ie5plus = true } if (full_version >= 5.5) { its_ie55plus = true } if (major_version >= 6) { its_ie6plus = true } } // NETSCAPE if (its_ns) { if (major_version < 3) { its_ns2 = true } else if (major_version < 4) { its_ns3 = true } else if (major_version == 4) { its_ns4 = true } else if (major_version == 5) { its_ns6 = true } if (major_version >= 3) { its_ns3plus = true } if (major_version >= 4) { its_ns4plus = true } if (major_version >= 5) { its_ns6plus = true } } // OPERATING SYSTEM // Use indexOf() to examine the userAgent string // for telltale signs of the operating system // WINDOWS 3.1 if ((user_agent.indexOf("windows 3.1") != -1) || (user_agent.indexOf("win16") != -1) || (user_agent.indexOf("16bit") != -1) || (user_agent.indexOf("16-bit") != -1)) { its_win31 = true } // WINDOWS 95 else if ((user_agent.indexOf("windows 95") != -1) || (user_agent.indexOf("win95") != -1)) { its_win95 = true } // WINDOWS ME if (user_agent.indexOf("win 9x 4.90") != -1) { its_winme = true } // WINDOWS 98 else if ((user_agent.indexOf("windows 98") != -1) || (user_agent.indexOf("win98") != -1)) { its_win98 = true } // WINDOWS XP else if ((user_agent.indexOf("windows nt 5.1") != -1) || (user_agent.indexOf("winnt 5.1") != -1)) { its_winxp = true } // WINDOWS 2000 else if ((user_agent.indexOf("windows nt 5.0") != -1) || (user_agent.indexOf("winnt 5.0") != -1)) { its_win2000 = true } // WINDOWS NT else if ((user_agent.indexOf("windows nt") != -1) || (user_agent.indexOf("winnt") != -1)) { its_winnt = true } // MAC 680x0 else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("68K") != -1) || (user_agent.indexOf("68000") != -1))) { its_mac68k = true } // MAC PowerPC else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("ppc") != -1) || (user_agent.indexOf("powerpc") != -1))) { its_macppc = true } // LINUX else if (user_agent.indexOf("linux") != -1) { its_linux = true } // OTHER OS else { its_other_os = true } // PLATFORM // Use the operating system booleans to // determine the general platform // MAC OS if (its_mac68k || its_macppc) { its_macos = true} // 32-BIT WINDOWS if (its_win95 || its_win98 || its_winme || its_winnt || its_win2000 || its_winxp) {its_win32 = true} // WINDOWS if (its_win31 || its_win32) {its_windows = true} // DHTML SUPPORT if (document.getElementById || document.all || document.layers) { dhtml_ok = true } </script> <script language="JavaScript" type="text/javascript">  </script> </head> <body onLoad="initialize()">  <div id="viewer1" style="position:absolute; left:10; top:0"> <img src="http://www.mcfedries.com/graphics/fiesole1.jpg"> </div> <div id="viewer2" style="position:absolute; left:10; top:0"></div> <div id="controls" style="position:absolute; left:10; top:325; width: 525; text-align: center; font-weight:bold"></div> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

不错的图片显示效果

<script language=JavaScript>  </script> <body οnlοad="img1.style.visibility='visible';chFilter()"> <img id=img1 style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50); VISIBILITY: hidden" src=http://www.it365cn.com/images/banner/yesky.jpg border=0 align="absmiddle">
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]