如何实现在热身链接时，显示一个小窗口

ReserveRainbow 2008-06-20 04:37:09

要求如标题，要求该窗口可以显示图片和链接...
最好用JavaScript实现，Css实现也行
示例如（指向发帖人的姓名，显示该发帖人的信息和一些链接）：http://qbar.qq.com/q100125

...全文

113 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

duizhang1108 2008-09-25

打赏
举报

能不能把你实现的代码贴上来，我需要学习一下

ReserveRainbow 2008-06-23

打赏
举报

我已实现了，谢谢各位

sd5816690 2008-06-20

打赏
举报

如果只是显示一些文字信息，加上title属性就可以了
例如：<a title="要显示的信息">一个用户</a>

如果有图片就用AJAX

ReserveRainbow 2008-06-20

打赏
举报

标题有问题，我的要求是：
当指向超链接时,在链接的旁边显示一个小窗口，窗口的内容可以显示图片和链接，最好能在<a href=""></a>的onmouseover事件时显示，鼠标移出，窗口消失
示例（指向带链接的用户名，显示窗口）：

scler 2008-06-20

打赏
举报

这个没有影响啊。
function getDim(el){
for (var lx=0,ly=0;el!=null;lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
return {x:lx,y:ly}
}
function Show_Window(sid){
classes = getDim(document.getElementById(sid));
document.getElementById(sid).style.top=(classes.y-1)+"px";
document.getElementById(sid).style.left=(classes.x+215)+"px";
document.getElementById(sid).style.display="";
}

<a href="" onmouseover="Show_Window("links")" id="links">超链接 </a>
这样不就可以解决了。

ReserveRainbow 2008-06-20

打赏
举报

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<a href="" onmouseover="Show_Window()">超链接</a>

我希望这么使用，谢谢

scler 2008-06-20

打赏
举报

scler 2008-06-20

打赏
举报

给你贴了个例子。研究下。

scler 2008-06-20

打赏
举报

<script language="javascript">

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

 }

 node.onmouseout=function() {

 this.className=this.className.replace(" over", "");

 }

 }

 }

 }

}

window.onload=startList;

</script>

<style type="text/css">

<!--

body {

  font: normal 11px verdana;

  }



ul {

  margin: 0;

  padding: 0;

  list-style: none;

  width: 150px; /* Width of Menu Items */

  border-bottom: 1px solid #ccc;

  }

  

ul li {

  position: relative;

  }

  

li ul {

  position: absolute;

  left: 149px; /* Set 1px less than menu width */

  top: 0;

  display: none;

  }



/* Styles for Menu Items */

ul li a {

  display: block;

  text-decoration: none;

  color: #777;

  background: #fff; /* IE6 Bug */

  padding: 5px;

  border: 1px solid #ccc; /* IE6 Bug */

  border-bottom: 0;

  }

  

/* Holly Hack. IE Requirement */

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */



li:hover ul, li.over ul { display: block; } /* The magic */

-->

</style>

</head>



<body>

<ul id="nav"> 

 <li><a href="#">首页</a></li> 

 <li><a href="#">源码</a> 

 <ul> 

 <li><a href="#">关于我们</a></li> 

 <li><a href="#">团对简介</a></li> 

 <li><a href="#">网站特效</a></li> 

 </ul> 

 </li> 

 <li><a href="#">服务</a> 

 <ul> 

 <li><a href="#">网站设计</a></li> 

 <li><a href="#">网站维护</a></li> 

 </ul> 

 </li> 

 <li><a href="#">联系我们</a> 

 <ul> 

 <li><a href="#">邮箱</a></li> 

 <li><a href="#">电话</a></li> 

 

 </ul> 

 </li> 



</ul>