有关图片相关的收集-飞搜信息网

1.掉链接图片的替代图片,如果图片路径无效，将显示出一张默认的图片

<img src="no.jpg" onerror="this.src='http://www.cnbruce.com/images/logo.gif'">

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" onload="javascript:if(this.width>screen.width-350)then(this.width=screen.width-350)">

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

<style>
a {blr:e-xpression(this.onFocus=this.blur())}
area {blr:e-xpression(this.onFocus=this.blur())}
</style>

4.选择图片产生缩略图，最多10个

<html>

<head>

<title>Upload Image</title>

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+'" onload="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.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 >

<TABLE align=center bgColor=#cccccc border=0

borderColorDark=#cccccc borderColorLight=#000000

cellPadding=5 cellSpacing=1 height=367

width="500">

<TBODY>

<TD align=left bgColor=#ffffff colSpan=2

height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%">

<TBODY>

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

<TD align=middle bgColor=#ebebeb colSpan=2

height=24> <DIV align=left>将图片上传至已有相册

<Select id=OldAlbum

name=OldAlbum onchange=AlbumChange(this.value);>

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

<TD align=middle bgColor=#ebebeb colSpan=2

height=24> <DIV align=center><FONT size=2>

<INPUT id=upcount name=upcount type=hidden

value=1>

</FONT></DIV></TD>

</TR>

</TBODY>

</TABLE>

</form>

</body>

</html>

5.随机显示图片

<script language=vbs>

Randomize

i=Int((80 * Rnd) + 1)

document.write"<img src='http://www.cnbruce.com/blog/smile/face"&i&".gif'>"

</script>

6.图片轮流切换

<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] = "http://www.cnbruce.com/blog/smile/face1.gif";

Pic[1] = "http://www.cnbruce.com/blog/smile/face2.gif";

Pic[2] = "http://www.cnbruce.com/blog/smile/face3.gif";

Pic[3] = "http://www.cnbruce.com/blog/smile/face4.gif";

Pic[4] = "http://www.cnbruce.com/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 onload="runSlideShow()">

<img id="SlideShow"/>