正文

在option下拉菜单选项中添加图片2007-01-26 18:28:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/elove/22836.html

分享到:

<h2 align=center>option下拉菜单选项中添加图片(原创)</h2>
<h3 align=center>作者 neweroica</h3>
<h3 align=center>2002-11-21 14:33</h3>
<scrīpt>
//*****************************************************************
//
//                   作者 neweroica
//                 񎧒-11-21 14:33
//               欢迎大家引用,但请保留此版权信息,谢谢!
//
//******************************************************************
var h=0;

function doSelect(id){
  if(h%2==0)
    list.style.display='';
  else
    list.style.display='none';
  h++;
  eval('title.innerHTML=title_'+id+'.value');
}
function selectList(imgSrc,i,id){
  title.innerHTML='<img src='+imgSrc+'>';
    eval('value_'+id+'.value='+(i+1));
}
function endSelect(){
  list.style.display='none';
  h=0;
}
function chBg(){
  if(h%2==0)
    list.style.display='';
  else
    list.style.display='none';
  h++;
}
function build(id,title,left,top,width,height,images){
  dw=document.write;
  dw('<input type=hidden id=title_'+id+' value='+title+'>');
  dw('<input type=hidden id=value_'+id+' value=0>');
  dw('<table width='+width+' height='+height+' cellspacing=0 cellpadding=0 style="position:absolute;left:'+left+';top:'+top+';border:1px solid #000000;">');
  dw('<tr><td id=title>'+title+'</td></tr></table>');
  dw('<table id=list width='+width+' height='+height+'  cellpadding=0 cellspacing=0 style="position:absolute;left:'+left+';top:'+(top+height)+';border:1px solid #000000;display:none;">');

  for(var i=0;i<images.length;i++){
    dw('<tr><td ōnmouseover=this.style.backgroundColor="#000088"; ōnmouseout=this.style.backgroundColor="#ffffff"; ōnblur=selectList("'+images[i]+'",'+i+',"'+id+'")><img src='+images[i]+'></td></tr>');
}
  dw('</table><input type=image src=http://202.112.86.128/studentspace/aqyw/js/option/sltBtn.gif style="position:absolute;left:'+(left+width-17)+';top:'+(top+2)+';" ōnclick=doSelect("'+id+'") ōnblur=endSelect()>');
}

//********************************************************************************

//这里是下拉菜单中的各个图片路径
var img=new Array(
                   "http://202.112.86.128/studentspace/aqyw/js/option/girl1.gif",
                   "http://202.112.86.128/studentspace/aqyw/js/option/girl2.gif",
                   "http://202.112.86.128/studentspace/aqyw/js/option/boy1.gif",
                   "http://202.112.86.128/studentspace/aqyw/js/option/boy2.gif",
                   "http://202.112.86.128/studentspace/aqyw/js/option/qq.gif"
                  );

//建立一个下拉菜单
build('myOption','请选择图象',400,150,100,20,img); //各参数的意义:id,title,left,top,width,height,images

//**********************************************************************************
</scrīpt>


<!--下面是测试选择的索引值-->
<br><br><br><br><br><br><br><br><div align=center>当前选项<input id=optInd size=5 value=0></div>
<scrīpt>
function chk(){
  optInd.value=value_myOption.value;
  setTimeout("chk()",500);
}chk();
</scrīpt>

 

阅读(6685) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册