Web-Programming-Lab/lab3a.html at master · ritesh-29/Web-Programming-Lab · GitHub

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
<?xml version="1.0" encoding="UTF-80"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
			<script type="text/JavaScript">
				var top1="stack1";
				function move(curr)
				{
					oldstack= document.getElementById(top1).style;
					newstack= document.getElementById(curr).style;
					oldstack.zIndex="0";
					newstack.zIndex="10";
					top1=curr;
				}
			</script>
			<style type="text/css">
				p.one
				{
					padding:1in;
					position:absolute;
					left:100px;
					top:50px;
					background-color:#128ABC;
					width:150px;
					z-index:5;
				}
				p.two
				{
					padding:1in;
					position:absolute;
					left:130px;
					top:60px;
					background-color:#998ABC;
					width:150px;
					z-index:3;
				}
				p.three
				{
					padding:1in;
					position:absolute;
					left:150px;
					top:70px;
					background-color:#FF8AFF;
					width:150px;
					z-index:1;
				}
				p.hover
				{
					background-color:#111fff;
				}
			</style>
	</head>
	<body>
		<p class="one" id="stack1" onmouseover="move('stack1')">This is para 1...</p>
		<p class="two" id="stack2" onmouseover="move('stack2')">This is para 2...</p>
		<p class="three" id="stack3" onmouseover="move('stack3')">This is para 3...</p>
	</body>