图片选择器
图片选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">powered by 25175.net
<!-- Image Picker Code Start--><HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript1.1>
//pfcai@sharera.com
//Images Picker
//init variables;
var MY_IMGS="http://stat.25175.com/mmsimg/comm/10020001/67351.gif
http://stat.caishow.com/mmsimg/comm/10020001/65380.gif";
var MY_IMGS_IDS="0 1";
var MY_SEPARATOR=" ";
var BROWSER_IE=true;
if(window.navigator.appName=="netscape")
BROWSER_IE=false;
var MY_IMG_WIDTH=64;
var MY_IMG_HEIGHT=64;
var MY_IMG_MARGIN=5;
var MY_IMG_PADDING=BROWSER_IE?0:5;
var MY_IMG_BORDER=0;
var CONTAINER_TOP;
var CONTAINER_LEFT;
var CONTAINER_UNIT_ROW=3;
var CONTAINER_UNIT_COL=2;
var CONTAINER_UNIT_WIDTH=MY_IMG_WIDTH+(MY_IMG_MARGIN+MY_IMG_BORDER+MY_IMG_PADDING)*2;
var CONTAINER_UNIT_HEIGHT=MY_IMG_HEIGHT+(MY_IMG_MARGIN+MY_IMG_BORDER+MY_IMG_PADDING)*2;
var CONTAINER_SCALE=1;
var CONTAINER_WARP=6;
var
CONTAINER_WIDTH=Math.round(CONTAINER_UNIT_WIDTH*CONTAINER_UNIT_ROW*CONTAINER_SCALE+CONTAINER_WARP);
var
CONTAINER_HEIGHT=Math.round(CONTAINER_UNIT_HEIGHT*CONTAINER_UNIT_COL*CONTAINER_SCALE+CONTAINER_WARP);
var CURRENT_PAGE=1;
//Start
var ImgSer_mouseon=false;
var container_loaded=false;
document.write("<DIV ID='ImgSer'
STYLE='height:0px;width:0px;position:absolute;top:0;left:0;visibility:hidden;z-index:1000'
onMouseOver='ImgSer(1)' onMouseOut='ImgSer(2)'></DIV>");
//init function
function loadImgSer(objB)
{
var objContainer=document.getElementById("ImgSer");
if(!container_loaded)
{
getParentOffset(objB);
objContainer.style.top=CONTAINER_TOP+75+2;
objContainer.style.left=CONTAINER_LEFT-75;
//load page content;
if(MY_IMGS.length==0 || MY_IMGS_IDS.length==0)
{
objB.disabled=true;
return true;
}
container_loaded=true;
}
writePage(1);
objContainer.style.visibility="visible";
}
//set images style;
function setImgS(objT,intMsg)
{
switch(intMsg)
{
case 0:
objT.style.background="";
objT.style.border="";
break;
case 1:
objT.style.background="#F9F9F9";
objT.style.border="1px solid #999999";
break;
default:
objT.style.background="";
objT.style.border="";
}
}
//Images selecter controler
function ImgSer(intMsg)
{
var objContainer=document.getElementById("ImgSer");
switch(intMsg)
{
case 0:
if(!ImgSer_mouseon)
objContainer.style.visibility="hidden";
break;
case 1:
objContainer.style.visibility="visible";
ImgSer_mouseon=true;
break;
case 2:
objContainer.style.visibility="hidden";
ImgSer_mouseon=false;
break;
default:
objContainer.style.visibility="visible";
}
}
//selecter set preview
function serPre(varSrc,varMsg)
{
var varH="icon_seld";
var strC="myPreview";
document.getElementById(varH).value=varMsg;
setPreview(varSrc,strC);
}
//preview
function setPreview(varSrc,strC)
{
var objPreviewContainer=document.getElementById(strC);
var defaultSrc=../../../objPreviewContainer.src;
var newSrc="";
if(typeof(varSrc)=="object")
newSrc=../../../varSrc.value;
else
newSrc=../../../varSrc;
if(newSrc)
objPreviewContainer.src=../../../newSrc;
else
objPreviewContainer.src=../../../defaultSrc;
return true;
}
//function to get element parent's offset;
function getParentOffset(objT)
{
CONTAINER_TOP=0;
CONTAINER_LEFT=0;
while(objT.offsetParent)
{
objT=objT.offsetParent;
CONTAINER_TOP+=objT.offsetTop;
CONTAINER_LEFT+=objT.offsetLeft;
}
return true;
}
//function write page content
function writePage(tpage)
{
CURRENT_PAGE=tpage;
var objContainer=document.getElementById("ImgSer");
var strSrc=../../../MY_IMGS;
var strSrc_id=MY_IMGS_IDS;
var unit_per_row=CONTAINER_UNIT_ROW;
var unit_per_page=CONTAINER_UNIT_COL*unit_per_row;
var myimgs=strSrc.split(MY_SEPARATOR);
var myimgs_ids=strSrc_id.split(MY_SEPARATOR);
var total_page=Math.ceil(myimgs.length/unit_per_page);
if(tpage>total_page)
tpage=total_page;
if(tpage<1)
tpage=1;
var staU=(tpage-1)*unit_per_page;
var limU=staU+unit_per_page;
if(limU>myimgs.length)
limU=myimgs.length;
var intT;
var tSrc=../../../"<table width='"+CONTAINER_WIDTH+"' height='"+CONTAINER_HEIGHT+"'
onContextmenu='return false'><tr><td align='left' valign='top'>";
var tcpage="";
for(oimg=staU;oimg<limU;oimg++)
{
tSrc+="<img width='64' height='64' boder='0'
style='cursor:hand;padding:5px;margin:5px;' src='"+myimgs[oimg]+"'
onClick='serPre(this.src,"+myimgs_ids[oimg]+");ImgSer(2);return false' onmouseover='setImgS(this,1)'
onmouseout='setImgS(this,0)' onContextmenu='return false'>";
intT=(oimg+1) % unit_per_row;
if(intT==0)
tSrc+="<br>";
}
tSrc+="</td></tr></table>"
if(total_page>1)
{
tcpage="<button type='button'
style='width:35px;height:15px;background-color:#ffffff;border:0px;cursor:hand'
onClick='writePage(CURRENT_PAGE+1)' onContextmenu='return false'>"+
"<font face='Webdings'>6</font></button>"+
"<button type='button'
style='width:35px;height:15px;background-color:#ffffff;border:0px;cursor:hand'
onClick='writePage(CURRENT_PAGE-1)' onContextmenu='return false'>"+
"<font face='Webdings'>5</font></button>";
if(tpage==total_page)
tcpage="<button type='button'
style='width:35px;height:15px;background-color:#ffffff;border:0px;cursor:hand'
onClick='writePage(CURRENT_PAGE-1)' onContextmenu='return false'>"+
"<font face='Webdings'>5</font></button>";
if(tpage==1)
tcpage="<button type='button'
style='width:35px;height:15px;background-color:#ffffff;border:0px;cursor:hand'
onClick='writePage(CURRENT_PAGE+1)' onContextmenu='return false'>"+
"<font face='Webdings'>6</font></button>";
}
objContainer.innerHTML="<table border='0' cellpadding='0' cellspacing='0'
bgcolor='#ffffff' style='border:1px solid #000000' onContextmenu='return false'><tr><td align='left'
valign='top'>"+
tSrc+
"</td></tr><tr><td height='5px'
align='center' valign='middle'>"+
tcpage+
"</td></tr></table>";
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="WIDTH: 75px; BACKGROUND-COLOR: #cccccc" vAlign=center
align=middle><IMG id=myPreview style="MARGIN: 1px" height=64 alt=预览
src="../../../image/65380.gif" width=64 align=absMiddle> </TD>
<TD vAlign=center align=left><BUTTON onblur=ImgSer(0)
style="BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px
solid; WIDTH: 15px; BORDER-BOTTOM: #999999 1px solid; HEIGHT: 75px"
onclick=loadImgSer(this); align="absmiddle"><FONT
face=Webdings>6</FONT></BUTTON> </TD></TR></TBODY></TABLE><BR>本地：<INPUT
id=iconFile type=file onChange="setPreview('file:///'+this.value,'myPreview')"
name=iconFile> <INPUT id=icon_seld type=hidden value=1 name=icon_seld> <!-- Image Picker Code
End--></BODY></HTML>
上一篇：农历时间显示
下一篇：依照QQ的导航菜单
|
|
