点出链接出现菜单(100分)

rcsglydm 2009-08-17 11:21:06
暂时没这多分,明天把分加满100分。
在做一个ASP程序,要求实现以下效果。表中列出员工姓名和单位名称。
1、点击员工姓名,在姓名的右下方出现一个方形框(实的虚的都行),上面显示他的年龄、性别、工作时间等。
2、点击单位名称,在名称的右下角出现一个方形框(实的虚的都行),上面显示A接洽单,B介绍信。点击介绍信,就会打开介绍信的页面,页面里动态显示出了单位名称,其他都是固定格式。
有些难度,谁能解决。
...全文
161 点赞 收藏 14
写回复
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
<script language="javascript">
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m));
// 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "500px";
newDiv.style.height = "300px";
newDiv.style.top = "50px";
//newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容    ";
document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
//newMask.style.background = "#000";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);

// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>

<body>
<a href="#" onclick="openNewDiv('newDiv');return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
</body>
回复
黑心 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";
}

}

回复
街头小贩 2009-08-17
用ajax好了!看看哪些电影网站都有类4你的需求
回复
发动态
发帖子
ASP
创建于2007-09-28

2.8w+

社区成员

ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
申请成为版主
社区公告
暂无公告