点出链接出现菜单（100分）

rcsglydm 2009-08-17 11:21:06

暂时没这多分，明天把分加满100分。
在做一个ASP程序，要求实现以下效果。表中列出员工姓名和单位名称。
1、点击员工姓名，在姓名的右下方出现一个方形框（实的虚的都行），上面显示他的年龄、性别、工作时间等。
2、点击单位名称，在名称的右下角出现一个方形框（实的虚的都行），上面显示A接洽单，B介绍信。点击介绍信，就会打开介绍信的页面，页面里动态显示出了单位名称，其他都是固定格式。
有些难度，谁能解决。

...全文

290 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

never exists 2009-08-21

打赏
举报

原先弄的跟你差不多吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="729" border="0" cellspacing="0" cellpadding="0" style="border-bottom:1px solid #fff;">
<tr>
<td width="38" align="right" valign="middle" style="padding:10px 0px;"></td>
<td width="671" align="left" valign="top" bgcolor="#ECECEC" style="padding:10px;"><table width="669" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="223" align="left" valign="top"><TABLE id=tablemdsin cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<tr>
<td align="left"><div id="top99909640"><a onmouseover="showMenuDIv( 99909640 )"
onmouseout="hiddenMenuDIv( 99909640 )"
href="#" class="cpmc">员工姓名</a></div></td>

</tr>

</table></td>

</tr>

<tr>
<td width="223" align="left" valign="top"><TABLE id=tablemdsin cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<tr>
<td align="left"> </td>
</tr>

</table></td>

</tr>

<tr>
<td width="223" align="left" valign="top"><TABLE id=tablemdsin cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<tr>
<td align="left"><div id="top99909641"><a onmouseover="showMenuDIv( 99909641 )"
onmouseout="hiddenMenuDIv( 99909641 )"
href="#" class="cpmc">单位名称</a></div></td>
</tr>

</table></td>

</tr>

</TBODY></TABLE></td>
</tr>
</table>

<STYLE type=text/css media=screen>.Vote {
MARGIN: 0px; WIDTH: 810px; PADDING-TOP: 0px; FONT-FAMILY: ARIAL; BACKGROUND-COLOR: #fdfffd; TEXT-ALIGN: center
}
.content {
MARGIN: 0px auto; WIDTH: 810px; POSITION: relative; TEXT-ALIGN: center
}
.TableTop {
FONT-SIZE: 12px; PADDING-BOTTOM: 3px; COLOR: #ffffff; HEIGHT: 18px; BACKGROUND-COLOR: green; TEXT-ALIGN: left
}
.tdbg-left {
BACKGROUND-POSITION: left top; FLOAT: left; BACKGROUND-IMAGE: url(http://www.ehsy.com/images/az-home_22.gif); WIDTH: 7px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 7px
}
.tdbg-right {
BACKGROUND-POSITION: right top; FLOAT: right; BACKGROUND-IMAGE: url(http://www.ehsy.com/images/az-home_25.gif); WIDTH: 7px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 7px
}
.toptext {
PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 150px; PADDING-TOP: 5px; TEXT-ALIGN: left
}
.toptdbg-right {
BACKGROUND-POSITION: right top; FLOAT: right; BACKGROUND-IMAGE: url(http://www.ehsy.com/images/az-tdbg-right.gif); WIDTH: 7px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 7px
}
.VoteTable {
BORDER-RIGHT: #5c9ec0 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #5c9ec0 1px solid; WIDTH: 810px; PADDING-TOP: 10px; BORDER-BOTTOM: #5c9ec0 1px solid
}
DIV {
WORD-BREAK: break-all; WHITE-SPACE: normal
}
</STYLE>

<SCRIPT type=text/javascript>
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;

}
function showMenuDIv(div)
{
var x = getTop(document.getElementById("top"+div));
var y = getTdLeft();
document.getElementById(div).style.top = x + 14+ "px";
document.getElementById(div).style.left = y + "px";
document.getElementById(div).style.display = "";
}
function hiddenMenuDIv(div)
{
document.getElementById(div).style.display = "none";
}
function hiddenMenuDIv2(ele)
{
setTimeout("ele.style.display= none ",2000);
}
function getTdLeft()
{
var obj = document.getElementById("tablemdsin").rows[0].cells[0];
var oRect = obj.getBoundingClientRect();
var x = oRect.left;
return x-19;
}
</SCRIPT>

<DIV class=Vote id=99909640 onMouseOver="showMenuDIv( 99909640 )"
style="DISPLAY: none; POSITION: absolute"
onmouseout="hiddenMenuDIv( 99909640 )">
<DIV class=content>

<DIV class=VoteTable>
<TABLE width="100%">
<TBODY>
<TR>
<TD>1.年龄</TD>
<TD>2.性别</TD>
<TD>3.工作时间</TD>
</TR>
</TBODY></TABLE></DIV></DIV></DIV>

<DIV class=Vote id=99909641 onMouseOver="showMenuDIv( 99909641 )"
style="DISPLAY: none; POSITION: absolute"
onmouseout="hiddenMenuDIv( 99909641 )">
<DIV class=content>

<DIV class=VoteTable>
<TABLE width="100%">
<TBODY>
<TR>
<TD><A href="a.html">A接洽单</A></TD>
<TD><A href="b.html">B介绍信</A></TD>

</TBODY></TABLE></DIV></DIV></DIV>

</body>
</html>

loveinet_168 2009-08-21

打赏
举报

DIV+CSS+js都可以实现在，网上都可以找到很多相同效果的代码。。

rcsglydm 2009-08-20

打赏
举报

谢谢,我先试试.

凡夫与俗子 2009-08-19

打赏
举报

没事，试试先，也是一个提高的过程

床上等您 2009-08-19

打赏
举报

显示信息就好简单，用ajax就可以实现，至于在某个字段上显示就要用到页面控制啊，控制才是难点啊。

hongmaohouzi 2009-08-19

打赏
举报

黑心 2009-08-19

打赏
举报

<head>

<script   language="javascript">   

   document.onclick = popUp

   function   popUp(){

   if (document.all.g1.value==2)

   {document.all.d1.style.visibility='hidden';}

   document.all.g1.value=2;

   }

  function   sh(divid,viz,valuex){ 

  document.all.d1.style.pixelLeft=event.x;   

  document.all.d1.style.pixelTop=event.y; 

  document.all.d1.style.display='block';   

  document.all.d1.style.visibility=viz;   

  document.all.s1.value=valuex;

  }   

  </script>

</head>

<body oncontextmenu='popUp();' ondragstart='popUp();' onselectstart='popUp();'>

 <table border='0' cellspacing='1' cellpadding='3' bgcolor='#dddddd'><tr bgcolor='#FFFFFF' onmouseover=javascript:this.bgColor='#F9F8F2' onmouseout=javascript:this.bgColor='#ffffff'><td width="65%" height="28"><a href='javascript:' onClick="sh('d1','visible','1');document.all.g1.value=1;" ><font color=black>张三</font></a>     </td></tr><tr bgcolor='#FFFFFF' onmouseover=javascript:this.bgColor='#F9F8F2' onmouseout=javascript:this.bgColor='#ffffff'><td height="28"><a href='javascript:' onClick="sh('d1','visible','2');document.all.g1.value=1;" ><font color=black>李四</font></a>    </td></tr><tr bgcolor='#FFFFFF' onmouseover=javascript:this.bgColor='#F9F8F2' onmouseout=javascript:this.bgColor='#ffffff'><td height="28"><a href='javascript:' onClick="sh('d1','visible','3');document.all.g1.value=1;" ><font color=black>王五</font></a>  </td></tr></table> 

<div   id=d1  style='BORDER-RIGHT:   #333333   1px   solid;   BORDER-TOP:   #333333   1px   solid;   DISPLAY:   none;   Z-INDEX:   102;   BORDER-LEFT:   #333333   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #333333   1px   solid;   POSITION:   absolute;   HEIGHT:   60px;   BACKGROUND-COLOR:   #eeeeee'   onclick='event.cancelBubble=true;'  >

  <table  style="cursor:hand" >

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input id="g1" type="hidden">

        <input id="s1" type="hidden">

        <input onClick="document.all.d1.style.visibility=='hidden';openwin(410,300,'info.asp?A_Id='+document.all.s1.value)"  value="查看详细信息" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee' >

      </td>

    </tr>

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input onClick="location.href='Add1.asp?A_Id='+document.all.s1.value"  value="发送电子邮件" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee'></td>

    </tr>

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input onClick="location.href='Add3.asp?A_Id='+document.all.s1.value"  value="发送站内短信" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee'></td>

    </tr>

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input   onClick="location.href='Add4.asp?A_Id='+document.all.s1.value"  value="发送手机短信" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee'></td>

    </tr>

  </table>

</div>

</body>

黑心 2009-08-19

打赏
举报

直接DIV就可以解决。

rcsglydm 2009-08-19

打赏
举报

我现在用的就是弹出新窗口，是父子传值方式。可是客户非要上述效果，郁闷。。。。。。

shaomingmark 2009-08-18

打赏
举报

其实有另外一种思路去解决。不用ajax 也不用Div

你直接用传值的方式单击的时候直接弹出一个新窗口，在新窗口中显示你的内容也可以的

rcsglydm 2009-08-18

打赏
举报

难啊，难。看来我问的都是ASP解决不了的问题。

suano 2009-08-17

打赏
举报

显示的话用div隐藏之类的方法，但是数据传入还是要用到AJAX

mailbao 2009-08-17

打赏
举报

div隱藏或顯示可以實現
如果你會用DW,直接在裏面生成這種特效.

或者直接參考這段JS代碼

--------------------------------



function switchSysBar()

{

    





 if (document.getElementById("img_1").title=="隐藏功能区域")

 

 {

 document.getElementById("img_1").title="展开功能区域"

 document.all("frmTitle").style.display="none";

 document.getElementById("img_1").src="../images/1-2.gif";

 }

 else

 {

 document.getElementById("img_1").title="隐藏功能区域"

 document.all("frmTitle").style.display="";

 document.getElementById("img_1").src="../images/1-1.gif";

 }

 

}