鼠标划过超链接弹出框问题!

CN02233 2009-01-15 10:27:47

我的设想是当鼠标划过超链接时,在当前页面直接弹出一个对话框显示超链接中的内容.
弹出对话框部分已经实现了,但是问题在于当我要查看弹出框中的内容时一定会动鼠标去查看,但是当鼠标移动后页面就会消失.
有没有一个办法能让这个弹出框固定在某处?请教高手指教!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>MouseOverPopWindowDemo</title>
<script language="javascript">
var FADINGTOOLTIP
var wnd_height, wnd_width;
var tooltip_height, tooltip_width;
var tooltip_shown=false;
var transparency = 100;
var timer_id = 1;

// override events
window.onload = WindowLoading;
window.onresize = UpdateWindowSize;
document.onmousemove = AdjustToolTipPosition;

setTimeout('window.location.reload(true)', 1140000); // 19 minutes

function DisplayTooltip(tooltip_text)
{
if (FADINGTOOLTIP) {
FADINGTOOLTIP.innerHTML = tooltip_text;
tooltip_shown = (tooltip_text != "")? true : false;
if(tooltip_text != "")
{
// Get tooltip window height
tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
transparency=0;
ToolTipFading();
}
else
{
clearTimeout(timer_id);
FADINGTOOLTIP.style.visibility="hidden";
}
}
}

function AdjustToolTipPosition(e)
{
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
e = event;
if( tooltip_shown )
{
offset_y = 20;//(e.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? - 15 - tooltip_height: 20;
FADINGTOOLTIP.style.visibility = "visible";
FADINGTOOLTIP.style.left = Math.min(wnd_width - tooltip_width - 10 , Math.max(3, e.clientX + 6)) + document.body.scrollLeft + 'px';
FADINGTOOLTIP.style.top = e.clientY + offset_y + document.body.scrollTop + 'px';
}
}

function WindowLoading()
{
FADINGTOOLTIP=document.getElementById('FADINGTOOLTIP');

// Get tooltip window width
tooltip_width = (FADINGTOOLTIP.style.pixelWidth) ? FADINGTOOLTIP.style.pixelWidth : FADINGTOOLTIP.offsetWidth;

// Get tooltip window height
tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;

FADINGTOOLTIP.style.left = 0;
FADINGTOOLTIP.style.top = 0;

UpdateWindowSize();
}

function ToolTipFading()
{
if(transparency <= 100)
{
FADINGTOOLTIP.style.filter="alpha(opacity="+transparency+")";
transparency += 10;
timer_id = setTimeout('ToolTipFading()', 10);
}
}

function UpdateWindowSize()
{
wnd_height=document.body.clientHeight;
wnd_width=document.body.clientWidth;
}

</script>
</HEAD>
<DIV id="mainPane">
<a href="http://www.163.com" onmouseover="DisplayTooltip('<iframe src=http://www.sina.com width=50% height=300px scrolling=no></iframe>');" onmouseout="DisplayTooltip('');">鼠标划过</a>
</DIV>
<div class="FadingTooltip" id="FADINGTOOLTIP" style="Z-INDEX: 103; LEFT: 16px; VISIBILITY: hidden; WIDTH: 360px; POSITION: absolute; TOP: 478px; HEIGHT: 30px">
</div>
</html>

...全文