<html>
<head>
<title>Pop-up Link with Description</title>
<style type="text/css">
.transparent {
filter:alpha(opacity=90);
background-color:green;
display:none;
width:170;
height:100;
position:absolute;
color: white;
border: 1 green solid;
}
</style>
<script>
// this function shows the pop-up when user moves the mouse over the link
function Show()
{
x = event.clientX + document.body.scrollLeft; // get the mouse left position
y = event.clientY + document.body.scrollTop + 35; // get the mouse top position
Popup.style.display="block"; // display the pop-up
Popup.style.left = x; // set the pop-up's left
Popup.style.top = y; // set the pop-up's top
}
// this function hides the pop-up when user moves the mouse out of the link
function Hide()
{
Popup.style.display="none"; // hide the pop-up
}
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<a href="" onMouseOut="Hide()" onMouseOver="Show()" onMouseMove="Show()">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link.
<div id="Popup" class="transparent">
<div style="background-color: #003366"><b>Title goes here</b></div>
<div></b>Description goes here</div>
</div>
</body>
</html>
Transparent pop-up link with desciption using JavaScript and CSS
需积分: 0 17 浏览量
2008-10-23
16:48:40
上传
评论
收藏 770B ZIP 举报
Transparent pop-up link with desciption using JavaScript and CSS.zip （1个子文件） 
TransparentPopUpSource.htm 1KB
评论0