如何实现在指向链接时,显示一个小窗口?

ReserveRainbow 2008-06-23 08:49:31
当指向超链接时,在链接的旁边显示一个小窗口,窗口的内容可以显示图片和链接,最好能在 <a href=""> </a>的onmouseover事件时显示,鼠标移出,窗口消失
示例(指向带链接的用户名,显示窗口):


------------------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!--
function Show_Window()
{
//窗口没显示,捕捉坐标,并显示窗口
.....

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

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

我希望这么使用,谢谢!
最好能给个简单的demo
...全文
102 点赞 收藏 6
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
ReserveRainbow 2008-06-23
谢谢wcwtitxu了,就是要这个
回复
ReserveRainbow 2008-06-23
找了两天了

麻烦xinglongjian能不能把那个例子整到一个html文件里,我整合了半天还是出错,谢谢了
回复
wcwtitxu 2008-06-23
<style>
#lay1{
border: 1px solid #aaa;
position: absolute;
z-index: 99
background: url('http://ialvin.cn/blog/skins/hello_world/bg.jpg');
padding: 2px;
font-size: 12px;
}
</style>

<div id='lay1' style='display:none; background:#fff;' onMouseOver="this.style.display='';" onMouseOut="hide()"> </div>
<span id="Span1"></span>
</div>
<script type='text/javascript'>
var lay = document.getElementById("lay1");
function mouseX(event) {
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function mouseY(event) {
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}
function setPos(event) {
lay.style.left = mouseX(event) + "px";
lay.style.top = mouseY(event) + "px";
}
function show(m) {
lay.innerHTML = m.parentNode.childNodes[0].innerHTML;
lay.style.display = '';
}
function hide() {
lay.style.display = 'none';
}
document.onclick = function(e) {
e = window.event || e;
var src = e.srcElement || e.target
if (src != lay) hide();
};
</script>
<span><div style='display:none;'>
1帐号:ReserveRainbow<br />
昵称:预约彩虹<br />
最新帖子:<br /><br />
如何实现在指向链接…<br />
如何实现在热身链接…<br />
更多帖子...
</div>
<a onmouseover="setPos(event);show(this);" onmouseout="">过来</a>
</span>

<span><div style='display:none;'>
2帐号:ReserveRainbow<br />
昵称:预约彩虹<br />
最新帖子:<br /><br />
如何实现在指向链接…<br />
如何实现在热身链接…<br />
更多帖子...
</div>
<a onmouseover="setPos(event);show(this);" onmouseout="">过来2</a>
</span>

<span><div style='display:none;'>
3帐号:ReserveRainbow<br />
昵称:预约彩虹<br />
最新帖子:<br /><br />
如何实现在指向链接…<br />
如何实现在热身链接…<br />
更多帖子...
</div>
<a onmouseover="setPos(event);show(this);" onmouseout="">过来3</a>
</span>
回复
汗!又是一个问JS模拟IDV的问题
不明白为什么这么多人问同一个问题,而不自己先搜索下资料
回复
xinglongjian 2008-06-23
在你的Show_Window()函数中调用你定义好的一个函数,这个函数就是你所显示的那个对话框
比如:
function Show_Window()
{

top.isok("显示内容","标题".....);//根据情况传递参数
}

在另外一个js文件里定义这个函数

function isok(question,title,width,height)
{
var content = " ";
content += "<table border='0' cellpadding='10' cellspacing='0' width='100%' align='center'>";
content += " <tr>";
content += " <td rowspan='2' style='text-align:right;'>";
content += " <img src='" + imgPath + "icon-question.gif' />  ";
content += " </td>";
content += " <td style='font-size:14px;'>";
content += "   " + question + "?<br/>";
content += " </td>";
content += " </tr>";
content += " <tr>";
content += " <td> </td>";
content += " </tr>";
content += "</table>";
content += "<table border='0' cellpadding='5' cellspacing='0' width='100%'>";
content += " <tr>";
content += " <td width='20%'>";
content += " </td>";
content += " <td>";
content += "   <input type='button' class='queding' onclick='window.frames[\""+frameName+"\"].okDao(\""+object+"\")';"
content += " value='是' />";
content += "   ";
content += " <input type='button' class='queding' onclick='HideConfig()'";
content += " value='否' />";
content += " </td>";
content += " </tr>";
content += "</table>";

jqModalWin(content, title, width, height );
}
在你定义的jquer工具包里定义jqModalWin()这个函数,
function jqModalWin(sContent, sTitle, width, height, callback){
if ( $("#tb_alertWin").size() == 0 )
genModal();

$("#tb_alertWin").jqm({overlay: 50, modal: true, trigger: false, onHide: function(h){h.w.hide();if(h.o) h.o.remove();$("#tb_alertWinContent").get(0).innerHTML="";}});
$("#tb_alertWinContent").html(sContent);
if(sTitle)
$("#tb_alertTitle").html(sTitle);
if (width)
{
$("#tb_alertWin").width(width+"px");
}

if (height)
{
$("#tb_alertWin").height(height+"px");
}

if( $.browser.msie )
$("#tb_alertWin").jqmShow().center();
else
$("#tb_alertWin").jqmShow().center();

if(callback){
$(".jqmClose").click(function(){
callback();
});
}
}
剩下的就是<a href="" onmouseover="Show_Window()">超链接 </a>

这样就可以了,你试试看吧
回复
ReserveRainbow 2008-06-23
图片显示不了,也就是CSDN里面有的效果,把鼠标放指向左边的发帖或回复人的图像上,显示一个窗口
这个是怎么实现的?
回复
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

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