Popup tooltip problem i javascript
Jeg har lavet en popup funktion som i koden nedenfor, der fungerer fint, indtil jeg begynder at scrolle, hvilket ændrer popupelementets placering i forhold til elementet, der aktiverer popupen. Hvordan undgår jeg dette?Jeg har testet en række lignende scripts, men de har alle denne fejl. Dog fungerer overlib.js som forventet. Hvad skal jeg tilføje mit script, for at få det til at fungere - også når jeg scroller?
-----Kode-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<!--Start on popuptext--->
<div class="transparentpopup" id="popup">
<div class="titlepopup">
<span class="titletextpopup">Here goes your title</span></div>
<div class="descriptionpopup">
<span>Ut aliquet, tellus semper tincidunt fermentum, justo enim facilisis sapien, vel
malesuada lacus lacus fermentum quam. Vivamus nisl magna, fringilla vel porta id,
egestas vel sapien. Nunc fringilla tortor a risus vehicula gravida. Maecenas ultricies
libero at nulla pellentesque interdum mollis dui accumsan. Praesent orci mi, molestie
vitae volutpat consectetur, vehicula at nulla. Curabitur sodales ligula vitae nibh
malesuada iaculis. Quisque ac libero augue. In eu justo odio. Donec sapien orci,
suscipit et cursus a, malesuada in orci. Suspendisse blandit hendrerit turpis ornare
gravida. Duis quis massa quis quam adipiscing ornare. Sed at neque massa, id luctus
eros. Etiam nunc dui, fermentum rutrum feugiat vitae, eleifend a erat. Fusce sagittis
pulvinar dignissim. Donec consequat consectetur volutpat. Cras cursus libero ac
urna euismod tristique. Ut hendrerit accumsan nisi at scelerisque. </span>
</div>
</div>
<!--End on popuptext-->
<!--Start on popup style and script-->
<style type="text/css">
.transparentpopup
{
-moz-opacity: 0.90;
opacity: 0.90;
filter: alpha(opacity=90);
background-color: #efefef;
display: none;
visibility: visible;
width: 600px;
height: auto;
position: absolute;
border: 1px black solid;
z-index: 2000;
}
.titletextpopup
{
background-color: inherit;
color: white;
font-weight: bold;
padding: 0px 5px;
}
.titlepopup
{
background-color: #003366;
}
.descriptionpopup
{
color: black;
padding: 0px 5px;
}
</style>
<script type="text/javascript">
function showPopup(id, e) {
var x = 0;
var y = 0;
var IE = document.all ? true : false;
//If your browser is IE
if (IE) {
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop + 5;
}
//If your browser is Netscape, FireFox, Opera, Safari
else {
x = e.pageX;
y = e.pageY + 5;
}
id.style.display = "block";
//Position element on the x- and the y-axis
id.style.left = x + 60;
id.style.top = y + 20;
}
function hidePopups(id) {
id.style.display = "none";
}
</script>
<!--End of Popup style and script-->
</head>
<body>
<div style="height: 400px;">
</div>
<a href="java script:void(null);" onmouseover="showPopup(popup,event)" onmouseout="hidePopups(popup)">
Test</a></span>
<div style="height: 400px;">
</div>
</body>
</html>
-----Kode slut!-----
