CSDN首页 空间 新闻 论坛 Blog 下载 读书 网摘 搜索 .NET Java 视频 接项目 求职 在线学习 买书 程序员 通知
可用分押宝游戏火热进行中... 专题改版:Java Web 专题
CSDN社区
搜索 收藏 打印 关闭
CSDN社区 >  Web 开发 >  JavaScript

各位高手,请教做带图片下拉菜单问题

楼主jolyjacky(逍遥散人)2004-05-04 12:35:05 在 Web 开发 / JavaScript 提问

各位大虾,   怎么做可以显示带图片的下拉菜单啊 问题点数:20、回复次数:12Top

1 楼dullwolf(超级大笨狼之羊皮马甲)回复于 2004-05-04 20:21:19 得分 0

这个嘛只能模拟拉。Top

2 楼dullwolf(超级大笨狼之羊皮马甲)回复于 2004-05-04 21:47:57 得分 20

我模拟了一个,你使用的时候修改LEFT,Top等的数值,放到合适的位置。  
  提交的时候用get方法提交相应属性。如果用post方法再放一个隐藏input,  
  不懂的地方再发短消息问我。  
  <HTML>  
  <HEAD>  
  <style>  
  .a  
  {  
  BORDER-RIGHT:   lightblue   1px   solid;  
  BORDER-TOP:   lightblue   1px   solid;  
  LEFT:   280px;    
  BORDER-LEFT:   lightblue   1px   solid;  
  WIDTH:   100px;    
  BORDER-BOTTOM:   lightblue   1px   solid;  
  POSITION:     absolute;    
  TOP:     37px;    
  HEIGHT:   24px;  
  }  
  .b  
  {  
  FONT-SIZE:   9px;  
  BORDER-LEFT-COLOR:lightblue;  
  LEFT:   358px;    
  BORDER-BOTTOM-COLOR:    
  lightblue;    
  WIDTH:   20px;    
  COLOR:   mediumblue;    
  BORDER-TOP-STYLE:   solid;    
  BORDER-TOP-COLOR:   lightblue;    
  BORDER-RIGHT-STYLE:   solid;    
  BORDER-LEFT-STYLE:   solid;    
  POSITION:   absolute;    
  TOP:   39px;  
  HEIGHT:   20px;    
  BACKGROUND-COLOR:   white;    
  BORDER-RIGHT-COLOR:   lightblue;  
  BORDER-BOTTOM-STYLE:   solid;    
  FILTER:   progid:DXImageTransform.Microsoft.Matrix(SizingMethod   ='auto   expand',FilterType=bilinear,Dx=0,Dy=0,M11=-1,M12=0,M21=0,M22=-1);  
  }  
  .c  
  {  
   
  LEFT:   280px;    
  WIDTH:   100px;    
  POSITION:     absolute;    
  TOP:     60px;    
  HEIGHT:   24px;  
  display:none;  
  cursor:pointer;  
  }  
  </style>  
  </HEAD>  
  <BODY>  
  <SELECT   id=select1   >  
  <OPTION   selected>111</OPTION>  
  <OPTION   >222</OPTION>  
  <OPTION   >333</OPTION>  
  </SELECT>  
  <INPUT   id=select2     class="a">  
  <INPUT   type=button   value="▲"   class="b"   onclick="ddd(this);"   title="">    
  <TABLE   border="1"   CELLPADDING=0   CELLSPACING=0   bordercolor="lightblue"   class="c"     onclick="aaa(this);">  
      <TR>  
          <TD   bordercolor="#FFFFFF"     onmouseover="bbb(this);"     onmouseout="ccc(this);"   title="1">  
  <img   src="http://expert.csdn.net/expert/images/rank/star1.gif">1星  
          </TD>  
  </TR>  
  <TR>  
   
          <TD   bordercolor="#FFFFFF"     onmouseover="bbb(this);"     onmouseout="ccc(this);"   title="2">  
  <img   src="http://expert.csdn.net/expert/images/rank/star2.gif">2星  
  </TD>  
  </TR>  
  <TR>  
   
          <TD   bordercolor="#FFFFFF"   onmouseover="bbb(this);"     onmouseout="ccc(this);"   title="3">  
  <img   src="http://expert.csdn.net/expert/images/rank/star3.gif">3星  
          </TD>  
  </TR>  
  </TABLE>  
  <SCRIPT   >  
    function   aaa(obj)  
  {  
  previousSibling(previousSibling(obj)).value=   window.event.srcElement.innerText;  
  previousSibling(previousSibling(obj)).title=   window.event.srcElement.abbr;  
  eee(obj);  
  }  
  function   bbb(obj)  
  {    
  obj.borderColor="#FF0000";  
  }  
  function   ccc(obj)  
  {  
  obj.borderColor="#ffffff";  
  }  
  function   ddd(obj)  
  {  
  nextSibling(obj).style.display="block";  
  }  
  function   eee(obj)  
  {  
  obj.style.display="none";  
  }  
  function   nextSibling(obj)  
  {  
  for(i=1;i<obj.document.all.length;i++)  
  {  
  if(obj==obj.document.all(i))  
  {  
  return(obj.document.all(i+1))  
  }  
  }  
  }  
  function   previousSibling(obj)  
  {  
  for(i=1;i<obj.document.all.length;i++)  
  {  
  if(obj==obj.document.all(i))  
  {  
  return(obj.document.all(i-1))  
  }  
  }  
  }  
  </SCRIPT>  
   
   
  </BODY></HTML>Top

3 楼dullwolf(超级大笨狼之羊皮马甲)回复于 2004-05-04 21:49:29 得分 0

更正一下:  
  function   aaa(obj)  
  {  
  previousSibling(previousSibling(obj)).value=   window.event.srcElement.innerText;  
  previousSibling(previousSibling(obj)).title=   window.event.srcElement.title;  
  eee(obj);  
  }Top

4 楼superdullwolf(超级大笨狼,每天要自强,MVP)回复于 2004-05-04 22:06:13 得分 0

可以改成htc,我脚本里面用的都是相对的对象,没用对象名称,我有时间的时候再琢磨一下,现在要玩去了。  
  dullwolf和superdullwolf都是我拉!  
  :)  
  那个帐号不能回复三个以上的帖子,所以我用这个登陆了。  
  要给分的话给dullwolf,我计划把那个帐号也弄成两星,好象三星没希望了。  
  <HTML>  
  <HEAD>  
  <style>  
  .a  
  {  
  BORDER-RIGHT:   lightblue   1px   solid;  
  BORDER-TOP:   lightblue   1px   solid;  
  LEFT:   280px;    
  BORDER-LEFT:   lightblue   1px   solid;  
  WIDTH:   100px;    
  BORDER-BOTTOM:   lightblue   1px   solid;  
  POSITION:     absolute;    
  TOP:     37px;    
  HEIGHT:   24px;  
  }  
  .b  
  {  
  FONT-SIZE:   9px;  
  BORDER-LEFT-COLOR:lightblue;  
  LEFT:   358px;    
  BORDER-BOTTOM-COLOR:    
  lightblue;    
  WIDTH:   20px;    
  COLOR:   mediumblue;    
  BORDER-TOP-STYLE:   solid;    
  BORDER-TOP-COLOR:   lightblue;    
  BORDER-RIGHT-STYLE:   solid;    
  BORDER-LEFT-STYLE:   solid;    
  POSITION:   absolute;    
  TOP:   39px;  
  HEIGHT:   20px;    
  BACKGROUND-COLOR:   white;    
  BORDER-RIGHT-COLOR:   lightblue;  
  BORDER-BOTTOM-STYLE:   solid;    
  FILTER:   progid:DXImageTransform.Microsoft.Matrix(SizingMethod   ='auto   expand',FilterType=bilinear,Dx=0,Dy=0,M11=-1,M12=0,M21=0,M22=-1);  
  }  
  .c  
  {  
   
  LEFT:   280px;    
  WIDTH:   100px;    
  POSITION:     absolute;    
  TOP:     60px;    
  HEIGHT:   24px;  
  display:none;  
  cursor:pointer;  
  }  
  </style>  
  </HEAD>  
  <BODY>  
  <SELECT   id=select1   >  
  <OPTION   selected>111</OPTION>  
  <OPTION   >222</OPTION>  
  <OPTION   >333</OPTION>  
  </SELECT>  
  <INPUT   id=select2     class="a">  
  <INPUT   type=button   value="▲"   class="b"   onclick="ddd(this);"   title="">    
  <TABLE   border="1"   CELLPADDING=0   CELLSPACING=0   bordercolor="lightblue"   class="c"     onclick="aaa(this);">  
      <TR>  
          <TD   bordercolor="#FFFFFF"     onmouseover="bbb(this);"     onmouseout="ccc(this);"   title="1">  
  <img   src="http://expert.csdn.net/expert/images/rank/star1.gif">1星  
          </TD>  
  </TR>  
  <TR>  
   
          <TD   bordercolor="#FFFFFF"     onmouseover="bbb(this);"     onmouseout="ccc(this);"   title="2">  
  <img   src="http://expert.csdn.net/expert/images/rank/star2.gif">2星  
  </TD>  
  </TR>  
  <TR>  
   
          <TD   bordercolor="#FFFFFF"   onmouseover="bbb(this);"     onmouseout="ccc(this);"   title="3">  
  <img   src="http://expert.csdn.net/expert/images/rank/star3.gif">3星  
          </TD>  
  </TR>  
  </TABLE>  
  <SCRIPT   >  
    function   aaa(obj)  
  {  
  previousSibling(previousSibling(obj)).value=   window.event.srcElement.innerText;  
  previousSibling(previousSibling(obj)).title=   window.event.srcElement.title;  
  eee(obj);  
  }  
  function   bbb(obj)  
  {    
  obj.borderColor="#FF0000";  
  }  
  function   ccc(obj)  
  {  
  obj.borderColor="#ffffff";  
  }  
  function   ddd(obj)  
  {  
  nextSibling(obj).style.display="block";  
  }  
  function   eee(obj)  
  {  
  obj.style.display="none";  
  }  
  function   nextSibling(obj)  
  {  
  for(i=1;i<obj.document.all.length;i++)  
  {  
  if(obj==obj.document.all(i))  
  {  
  return(obj.document.all(i+1))  
  }  
  }  
  }  
  function   previousSibling(obj)  
  {  
  for(i=1;i<obj.document.all.length;i++)  
  {  
  if(obj==obj.document.all(i))  
  {  
  return(obj.document.all(i-1))  
  }  
  }  
  }  
  </SCRIPT>  
   
   
  </BODY></HTML>  
  Top

5 楼superdullwolf(超级大笨狼,每天要自强,MVP)回复于 2004-05-04 22:07:05 得分 0

多给点分偶是不介意滴!  
  做完肩膀好疼啊!Top

6 楼superdullwolf(超级大笨狼,每天要自强,MVP)回复于 2004-05-04 22:07:51 得分 0

知道偶能发多少回贴吗?Top

7 楼superdullwolf(超级大笨狼,每天要自强,MVP)回复于 2004-05-04 22:08:03 得分 0

真的不知道?Top

8 楼superdullwolf(超级大笨狼,每天要自强,MVP)回复于 2004-05-04 22:08:25 得分 0

嘿嘿,俺也不知道:)Top

9 楼dullwolf(超级大笨狼之羊皮马甲)回复于 2004-05-04 22:21:53 得分 0

哦,好象我跑题了,好象你要的是菜单,而不是selectTop

10 楼dullwolf(超级大笨狼之羊皮马甲)回复于 2004-05-05 03:41:00 得分 0

参考这个吧  
  http://expert.csdn.net/Expert/topic/3027/3027427.xml?temp=6.130618E-02Top

11 楼jolyjacky(逍遥散人)回复于 2004-05-06 22:04:45 得分 0

大虾,还有一点小问题,怎么在图象右边不显示文字,而点击图片后仍然可以在文本框中加入相应的文本呢,还有当有很多图片要在下拉菜单中显示时,怎么控制它不让窗口滚动条加长,即不会影响当前窗口的状况,但仍然可以全部显示图片Top

12 楼chinadrgon(zhouzhou)回复于 2004-05-06 23:53:16 得分 0

dullwolf(超级大笨狼过程版(★★))   &&     superdullwolf(超级大笨狼,每天要自强)  
  I   服   you!!!!!!真是灌水高高高手!Top

相关问题

  • "上载图片文件"和"下拉菜单问题"?请教
  • 下拉菜单里面可以放图片吗?
  • 怎么在下拉菜单里加入图片??????????????
  • 下拉菜单被图片挡住了,该如何解决啊?
  • 下拉菜单被图片给挡住了该如何解决?
  • 下拉菜单选择,显示图片的问题。
  • 如何创建一个带下拉菜单的按钮?
  • 下拉菜单
  • 下拉菜单
  • 下拉菜单

关键词

  • 星

得分解答快速导航

  • 帖主:jolyjacky
  • dullwolf

相关链接

  • Web开发类图书

广告也精彩

反馈

请通过下述方式给我们反馈
反馈
提问
网站简介|广告服务|VIP资费标准|银行汇款帐号|网站地图|帮助|联系方式|诚聘英才|English|问题报告
世纪乐知(北京)网络技术有限公司 版权所有, 京 ICP 证 020026 号
北京创新乐知广告有限公司 提供技术支持
Copyright © 2000-2007, CSDN.NET, All Rights Reserved
GongshangLogo