select下拉框显示图片

select下拉框显示图片
2011-11-22

今天，在网易博客中看到一篇好的技术文档，在此记录下来。

将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”，并放在“head”目录下。  
   
   图片下拉菜单的代码如下：  
   
   <!--建立表单-->  
   <form    name="myform"    method="post"    action="">请选择图片：  
   <div    id="imgBox"><!--这里是图片下拉选择器的位置--></div>  
   <input    name="myhead"    type="text"    id="myface"    size="10"    value="">  
   </form>    
   <script    language="JavaScript">  
   <!--  
   var    imgWidth=64;    //列表框中图片的宽度;  
   var    imgHeight=64;    //列表框中图片的高度;  
   var    imgSrc="head/数字序号.jpg";    //供选图片的路径。"数字序号"四字将在程序中替换为0,1,2...，不要手工更改为数字    ;  
   var    selectedNo=7;    //默认选定的图片序号;  
   var    selecteSize=2;    //下拉列表框中显示的图片数;  
   
   
   /*    以下把图片和层输出在"imgBox"的位置：    
   我们用变量"isin"记录鼠标是否在该控件上；用CSS定义下拉列表框的滚动条，"overflow-x:hidden;overflow-y:scroll;"指水平方向不滚动，竖直方面滚动；  
   用for()循环依次把图片输出到下拉列表框。  
   */  
   var    myHTML='<SPAN    onmouseover="isin=true"    onmouseout="isin=false">';  
   myHTML+='<table    width="1"    onclick="showlist(this)"    title="选择提示框"    border="0"    cellspacing="0"    cellpadding="0"><tr><td><img    name="imgselected"    border=1    src="'+imgSrc.replace("数字序号",selectedNo)+'"    WIDTH='+(imgWidth)+'    HEIGHT='+imgHeight+'></td><td    valign=top><img    src="menu.jpg"></td></tr></table>';  
   myHTML+='<DIV    onscroll="scrollud()"    id="imgBox"    \n';  
   myHTML+='style="position:absolute;left=-800;top=0;background-color:#FFFFFF;border:    1px    solid    #000000;overflow-x:hidden;overflow-y:scroll;    width:'+(imgWidth+20)+'px;    height:    '+imgHeight*selecteSize+'px">';  
   for(i=0;i<10;i++){  
   myHTML+="<img    listID="+i+"    src='"+imgSrc.replace("数字序号",i)+"'    alt='"+imgSrc.replace("数字序号",i)+"'    width="+imgWidth+"    height="+imgHeight+"    onclick='selectme(this)'    onload='if(init)init()'><BR>";  
   }  
   myHTML+=    "</DIV></SPAN>";  
   imgBox.outerHTML=myHTML;  
   
   /*    以下控制下拉列表框的出现或隐藏    */  
   function    showlist(obj){//这个函数将在选择提示框点击时激活  
   //如果列表框已经出现，这次点击则隐藏：  
   if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800;    return;}  
   
   //读取选择提示框在窗体中的绝对位置：  
   //在父容器中的相对位置：  
   var    mytop=obj.offsetTop;    
   var    myleft=obj.offsetLeft;  
   //依次读取父容器在更高一级父容器中的相对位置：    
   while(obj=obj.offsetParent){  
   myleft+=obj.offsetLeft;    
   mytop+=obj.offsetTop;    
   }  
   //现在已经得到选择提示框的绝对位置myleft和mytop。  
   //下拉列表拉就出现在这个绝对位置的正下方：  
   imgBox.style.left=myleft;  
   imgBox.style.top=mytop+imgHeight+2;  
   
   }  
   
   var    isin=false;  
   function    selectme(obj){    //这个函数将在窗体点击或选定图片时激活，窗体点击中传递的参数是null。  
   if(!isin||obj){imgBox.style.pixelLeft=-800;}    //隐藏列表框  
   if(obj){  
   //改变选择提示框中的图片和"myhead"输入框中的值：  
   //listID是对象的自定义属性，即在对象的标签中定义了这个属性值，现在就可以读取或改变。  
   myform.myhead.value=imgSrc.replace("数字序号",obj.listID);  
   document.images["imgselected"].src=imgSrc.replace("数字序号",obj.listID);  
   }  
   }  
   
   /*    以下控制下拉列表框的自动滚动    */  
   var    mytime=setTimeout("",0);  
   var    pre_X=0;    //这个变量用来记录滚动前滚动条的位置  
   function    scrollud(){    //本函数在下拉列表框滚动时被激活  
   var    current_X=imgBox.scrollTop;    //记录函数激活时滚动条的位置  
   //判断向上还是向下滚动，并自动滚动到"imgHeight"的整数倍。  
   //我们改变列表框的scrollTop值时，会自动激发其onscroll事件，循环激活本函数。  
   if(current_X>pre_X    &&    imgBox.scrollTop<    Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){  
   clearTimeout(mytime);  
   mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop+1);",1);  
   }  
   else    if(current_X<pre_X    &&    imgBox.scrollTop>    Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){  
   clearTimeout(mytime);  
   mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);  
   }  
   pre_X=current_X;  
   }  
   //使列表框自动滚动到默认选定的图片位置，并给"myhead"输入框以默认值  
   function    init(){    //本函数在每个列表框中的图片加载时激活  
   imgBox.scrollTop=selectedNo*imgHeight;  
   myform.myhead.value=imgSrc.replace("数字序号",selectedNo);  
   }  
   
   /*    以下使窗体点击时selectme(obj)函数被激活：    */  
   myActivation="selectme(null)";  
   if(document.body.onclick)  
   {  
   eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));  
   document.body.onclick=new    Function("bodyclick();"+myActivation);  
   }  
   else    document.body.onclick=new    Function(myActivation);   
   -->  
   </script>
完成后效果如下：   
对照上面的代码,我的程序中多了一句:var init=0;,去掉就好了.
var imgWidth=64;   //The images width in the imgBox;
var imgHeight=64;  //The images height in the imgBox;
var selectedNo=6;  //The image's No which is eslected;
var selecteSize=2; //the count of items which be show in the list;
var imgSrc="../images/liuyan/数字序号.gif";  //Don't Replace "数字序号" to figure;
var isnum="数字序号";
var init=0;
/*************  Write images   *************/
var myHTML='<SPAN onmouseover="isin=true" onmouseout="isin=false">';
myHTML+='<table width="1" onclick="showlist(this)" title="选择提示框" border="0" cellspacing="0"
cellpadding="0"><tr><td><img name="imgselected" border=0 src="'+imgSrc.replace("数字序号",selectedNo)
+'" WIDTH='+(imgWidth)+' HEIGHT='+imgHeight+'></td><td valign=top><img
src="../images/liuyan/menu.gif"></td></tr></table>';
myHTML+='<DIV onscroll="scrollud()" id="imgBox" \n';
myHTML+='style="position:absolute;left=-800;top=0;background-color:#FFFFFF;border: 1px solid
#000000;overflow-x:hidden;overflow-y:scroll; width:'+(imgWidth+20)+'px; height:
'+imgHeight*selecteSize+'px">';
for(i=1;i<39;i++){