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

Code:

<!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:

Code:

<!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.

Code:

<!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

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"

Thread: multiple onmouseover not working

Thread Tools

Search Thread

multiple onmouseover not working

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions