网页图片处理JS代码整理
1，掉链级图片的替代图片
<img src="http://www.boke360.com/no.jpg" onerror="this.src="http://www.boke360.com/images/logo.gif'">
2.自动缩小大图 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="http://www.boke360.com/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 onclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">
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="http://www.boke360.com/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 onclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">
3.按比例缩小
<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.boke360.com/img/wallpaper.jpg">
for (var i=0;i<document.images.length;i++){
document.images[i].width=document.images[i].width*0.5
}
</script>
<img src="http://www.boke360.com/img/wallpaper.jpg">
4.类似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;" onmousedown="initdrag()" onmousemove="startdrag()" onmouseup="enddrag()" scroll=yes>
<img src="http://www.boke360.com/img/wallpaper.jpg">
<img src="http://www.boke360.com/img/whitney.jpg">
</body>
</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;" onmousedown="initdrag()" onmousemove="startdrag()" onmouseup="enddrag()" scroll=yes>
<img src="http://www.boke360.com/img/wallpaper.jpg">
<img src="http://www.boke360.com/img/whitney.jpg">
</body>
</html>
5.选择图片产生缩略图，最多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("请输入新相册名称nn")!=-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="http://www.boke360.com/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="http://www.boke360.com/imgURL";
//finish check
}
}
function ShowImgOfServer(NewPath,ImgD){
ImgD.src="http://www.boke360.com/NewPath";
}
/////////////////////////////////////
function DrawImage(ImgD,Index){
var flag=false;
var image=new Image();
image.src="http://www.boke360.com/ImgD.src";
ImgD.value="http://www.boke360.com/ImgD.src;
" if(image.fileSize>2048000){
image.outerHTML="";
gErr+="此图片尺寸过大,图片尺寸应小于2MBn";
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("此图片尺寸过大,图片尺寸应小于2MBn");
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>
<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("请输入新相册名称nn")!=-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="http://www.boke360.com/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="http://www.boke360.com/imgURL";
//finish check
}
}
function ShowImgOfServer(NewPath,ImgD){
ImgD.src="http://www.boke360.com/NewPath";
}
/////////////////////////////////////
function DrawImage(ImgD,Index){
var flag=false;
var image=new Image();
image.src="http://www.boke360.com/ImgD.src";
ImgD.value="http://www.boke360.com/ImgD.src;
" if(image.fileSize>2048000){
image.outerHTML="";
gErr+="此图片尺寸过大,图片尺寸应小于2MBn";
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("此图片尺寸过大,图片尺寸应小于2MBn");
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>
6.不同的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-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<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.boke360.com/images/logo.gif" alt="网页教学网">
<!--
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-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<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.boke360.com/images/logo.gif" alt="网页教学网">
6.经常看到一些图片很大，上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”，则让该图就显示“屏幕宽度-350”这么大小。
原图<br>
<img src="http://www.boke360.com/jsimg/wallpaper.jpg"><br>
设定大小的图<br>
<img src="http://www.boke360.com/jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">
<img src="http://www.boke360.com/jsimg/wallpaper.jpg"><br>
设定大小的图<br>
<img src="http://www.boke360.com/jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">
7.禁止IE6中大尺寸图片的自动缩小
原图,会自动缩小<br>
<img src="http://www.boke360.com/jsimg/wallpaper.jpg"> <br>
设定不缩小<br>
<img src="http://www.boke360.com/jsimg/wallpaper.jpg" galleryimg="no">
<img src="http://www.boke360.com/jsimg/wallpaper.jpg"> <br>
设定不缩小<br>
<img src="http://www.boke360.com/jsimg/wallpaper.jpg" galleryimg="no">
8.去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）
方法一：
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img galleryimg="no">
定义CSS：
<style>
img {nobar:expression(this.galleryImg='no')}
</style>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img galleryimg="no">
定义CSS：
<style>
img {nobar:expression(this.galleryImg='no')}
</style>
9.去掉热点地图上的区域线框与超链接的线框
<a href="#" onFocus=this.blur()><img src="http://www.boke360.com/jsimg/marylin.jpg" border=0></a>
10.可控制上传图片的大小
<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>
<img id=loadImg>
</form>
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>
<img id=loadImg>
</form>
