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

ReserveRainbow 2008-06-20 04:37:09
要求如标题,要求该窗口可以显示图片和链接...
最好用JavaScript实现,Css实现也行
示例如(指向发帖人的姓名,显示该发帖人的信息和一些链接):http://qbar.qq.com/q100125
...全文
72 点赞 收藏 12
写回复
12 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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">
<!--
function Show_Window()
{
//窗口没显示,捕捉坐标,并显示窗口
.....

//当鼠标移出窗口时,隐藏窗口
.....
}
//-->
</SCRIPT>

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

我希望这么使用,谢谢
回复
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 showlist(sid){
classes = getDim(document.getElementById("class_"+sid));
document.getElementById(sid).style.top=(classes.y-1)+"px";
document.getElementById(sid).style.left=(classes.x+215)+"px";
document.getElementById(sid).style.display="";
}
上面的函数可以回去触发事件标签的坐标。调整下后面的1和215的数值就可以获得你想要的位置
回复
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>
回复
ReserveRainbow 2008-06-20
但是我希望还能捕捉到相关的坐标,使窗口能在链接的位置下方或侧面显示
回复
scler 2008-06-20
给你提供思路!
建立以个绝对定位div,dispaly属性设置none;。然后把z-inex属性设大点。
添加事件当鼠标经过的时候把div的dispaly属性设置为"".移开的时候再设置回none。
回复
ReserveRainbow 2008-06-20
鼠标指向的时候就显示,移开的时候就消失
最好能给个完整的小例子
回复
相关推荐
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2008-06-20 04:37
社区公告
暂无公告