PDA

View Full Version : multiple onmouseover not working



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>

Nile
12-21-2010, 05:53 AM
Give this a try:


<!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; }
#word {
position: absolute;
padding: 5px;
border: 1px solid black;
background: #eee;
left: 0px;
top: 0px;
visibility: hidden;
overflow: hidden;
}
#giraffe:hover
{
visibility: visible;
}
</style>
</head>
<body>
<div id="word" onmouseout="this.style.visibility='hidden';">
An animal with a very long neck.
</div>
<h2>Animals</h2>
A <a href="#" onmouseover="popup(this);" id="giraffe" class="word">giraffe</a>
is a very interesting animal.


<script type="text/javascript">
var popup = function(me){
var word = document.getElementById(me.className);
word.style.visibility = "visible";
word.style.left = me.offsetLeft+"px";
word.style.top = me.offsetTop+"px";
}
</script>

</body>
</html>

dougie1983
12-21-2010, 11:01 PM
Hey Nile, thank you very much.
This works fine.





<!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; }
#word {
position: absolute;
padding: 5px;
border: 1px solid black;
background: #eee;
left: 0px;
top: 0px;
visibility: hidden;
overflow: hidden;
}
#giraffe:hover
{
visibility: visible;
}
</style>
</head>
<body>
<div id="word" onmouseout="this.style.visibility='hidden';">
It's all about the APPS
</div>
<h2>Android Tablets</h2>
A <a href="http://www.iloveandroidtablets.com" onmouseover="popup(this);" id="giraffe" class="word">Android Pads Tablet</a>
very interesting technology.

Nile
12-22-2010, 04:56 PM
No problem, I'm glad to help :D

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"