在option下拉菜单选项中添加图片

论坛链接

在option下拉菜单选项中添加图片
发布时间：2007-10-06 09:51:41 浏览数：8874 发布者：webptr 设置字体【大中小】

<h2 align=center>option下拉菜单选项中添加图片</h2>
<h3 align=center>作者 tznktg</h3>
<h3 align=center>2005-12-21 10:09</h3>
<script>

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 onmouseover=this.style.backgroundColor="#000088"; onmouseout=this.style.backgroundColor="#ffffff"; onblur=selectList("'+images+'",'+i+',"'+id+'")><img src='+images+'></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)+';" onclick=doSelect("'+id+'") onblur=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

//**********************************************************************************
</script>


<br><br><br><br><br><br><br><br><div align=center>当前选项<input id=optInd size=5 value=0></div>
<script>
function chk(){
optInd.value=value_myOption.value;
setTimeout("chk()",500);
}chk();
</script>

无间隔循环滚动公告板

WEB打印大全

娱乐休闲专区A 影视预告 B 音乐咖啡 C 英语阶梯 D 生活百科

网页编程专区E AMPZ F HTML G CSS H JS I ASP J PHP K JSP L MySQL M AJAX

Linux技术区 N 系统管理 O 服务器架设 P 网络/硬件 Q 编程序开发 R 内核/嵌入

管理中心专区S 发布网址 T 版主议事 U 事务处理

在option下拉菜单选项中添加图片

上一篇：

下一篇：