Question : onmouse over pop up navigation button

when put mouse on the image pop up is coming.but i am not able to click that button.pop up is disappearing.

what you can call these kind of scripts?where you can learn these kind of scripts

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	.popup {
	position:absolute;
	left:90px;
	top:10px;
	width:150px;
	height:100px;
	border:#FF0000 solid 2px;
	background-color:#FFFFFF;
	
	}

	.btn {
	position:absolute;
	left:32px;
	top:60px;
	height:30px;
	 cursor: hand;
	
	}
</style>
  <script>
 
  	function popup(){
		document.getElementById('label').style.display='';
	}
 	function popupmouseout(){
		document.getElementById('label').style.display='none';
	}
  </script>
 </HEAD>

 <BODY>
 <table border='1'>
 <tr>
 <td>
 <img id='img1' src='ex.gif' onclick='image(this.src,this.id)' onmouseover="popup()" onmouseout="popupmouseout()" >
 </td>
 </tr>

 </table>
  	<div id="label" style=" display:none;" class="popup">
    	This is your pop up div
    <input type="button" value='add Card' onclick="popup()" class="btn" />
    </div>
  

 </BODY>
</HTML>

Answer : onmouse over pop up navigation button

See example

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>new document</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
.popup {
   position:absolute;
   left:90px;
   top:10px;
   width:150px;
   height:100px;
   border:#ff0000 solid 2px;
   background-color:#ffffff;
}

.btn {
   position:absolute;
   left:32px;
   top:60px;
   height:30px;
   cursor: hand;
}
</style>
<script type="text/javascript">
var t;
function show() {
	document.getElementById('label').style.display='';
}
function hide() {
	document.getElementById('label').style.display='none';
}
function popup() {
	clearTimeout(t);
	show();
}
function popupmouseout() {
	t = setTimeout(hide, 2000);
}
</script>
</head>
<body>
<table border='1'>
	<tr>
		<td><img id='img1' src='ex.gif' onclick='image(this.src,this.id)' onmouseover="popup()" onmouseout="popupmouseout()"></td>
	</tr>
</table>
<div id="label" style=" display:none;" class="popup" onmouseover="popup()" onmouseout="popupmouseout()">This is your pop up div
	<input type="button" value='add card' onclick="popup()" class="btn" />
</div>
</body>
</html>