dougie1983
12-21-2010, 05:34 AM
I need help. Anyone who can help me I would be greatful.
I am trying to get a pop up box when someone hovers over a link, and that the box remain while I hover over the box. Then disappear when i onmouseout.
I am getting it to work the first time, the problem is that it does not work the second time when I hover over. Here is the link to that test page..and the code below that i am using. Hover over the link then the box...then move away and try to do it again..its not working
http://www.iloveandroidtablets.com/test2.php
<!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>Pop up Example</title>
<style type="text/css">
body { font-family: arial, verdana, sans serif; }
#popup {
position: absolute;
padding: 5px;
border: 1px solid black;
background: #eee;
left: 0px;
top: 0px;
visibility: hidden;
overflow: hidden;
}
</style>
</head>
<body>
<div id="popup" onmouseover="popup(this.id);" onmouseout="mouseout(this.id);">
An animal with a very long neck.
</div>
<h2>Animals</h2>
A <a href="#" onmouseover="popup(this.id);return false" id="word">giraffe</a>
is a very interesting animal.
<script type="text/javascript">
function popup( id )
{
var t = setTimeout(function() {hide(id);},600);
}
function hide(id) {
var obj = document.getElementById( id );
var popup = document.getElementById( 'popup' );
popup.style.left = obj.offsetLeft + "px";
popup.style.left = obj.offsetLeft + "px";
popup.style.top = ( obj.offsetTop + 0 ) + "px";
popup.style.visibility = 'visible';
}
function mouseout(id)
{
obj = document.getElementById( id );
popup = document.getElementById( 'popup' );
popup.style.display = 'none';
clearTimeout(t);
t = null;
}
</script>
</body>
</html>
I am trying to get a pop up box when someone hovers over a link, and that the box remain while I hover over the box. Then disappear when i onmouseout.
I am getting it to work the first time, the problem is that it does not work the second time when I hover over. Here is the link to that test page..and the code below that i am using. Hover over the link then the box...then move away and try to do it again..its not working
http://www.iloveandroidtablets.com/test2.php
<!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>Pop up Example</title>
<style type="text/css">
body { font-family: arial, verdana, sans serif; }
#popup {
position: absolute;
padding: 5px;
border: 1px solid black;
background: #eee;
left: 0px;
top: 0px;
visibility: hidden;
overflow: hidden;
}
</style>
</head>
<body>
<div id="popup" onmouseover="popup(this.id);" onmouseout="mouseout(this.id);">
An animal with a very long neck.
</div>
<h2>Animals</h2>
A <a href="#" onmouseover="popup(this.id);return false" id="word">giraffe</a>
is a very interesting animal.
<script type="text/javascript">
function popup( id )
{
var t = setTimeout(function() {hide(id);},600);
}
function hide(id) {
var obj = document.getElementById( id );
var popup = document.getElementById( 'popup' );
popup.style.left = obj.offsetLeft + "px";
popup.style.left = obj.offsetLeft + "px";
popup.style.top = ( obj.offsetTop + 0 ) + "px";
popup.style.visibility = 'visible';
}
function mouseout(id)
{
obj = document.getElementById( id );
popup = document.getElementById( 'popup' );
popup.style.display = 'none';
clearTimeout(t);
t = null;
}
</script>
</body>
</html>