JavaScript program with CSS

Put Your Plan Into Action

JavaScript program with CSS

Simple javaScript program which contain three short paragraph of text that Stacked on top of each other
paragraph , only when mouse cursor is placed over the exposed part of any paragraph.



HTML code

<html>
	<head>
		<title>DYNAMIC STACKING OF IMAGES </title>
		<script type="text/javascript" src="dynamic.js"></script>
		<style type="text/css">
			.panel1{
				position : absolute;
				top : 10px;
				left : 10px;
				z-index : 0;
				background-color : yellow
			}
			.panel2{
				position : absolute;
				top : 40px;
				left : 20px;
				z-index : 0;
				background-color : blue
			}
			.panel3{
				position : absolute;
				top : 75px;
				left : 30px;
				z-index : 0;
				background-color : red
			}
		</style>
	</head>
	<body>
		<pre>
				<p id="text1" class="panel1" onmouseover="toTop('text1');">
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				</p>
		</pre>
		<pre>
				<p id="text2" class="panel2" onmouseover="toTop('text2');">
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
				</p>
		</pre>
		<pre>
				<p id="text3" class="panel3" onmouseover="toTop('text3');">
					ccccccccccccccccccccccccccccccccccccccccccccccccccccc
					ccccccccccccccccccccccccccccccccccccccccccccccccccccc
					ccccccccccccccccccccccccccccccccccccccccccccccccccccc
					ccccccccccccccccccccccccccccccccccccccccccccccccccccc
					ccccccccccccccccccccccccccccccccccccccccccccccccccccc
					ccccccccccccccccccccccccccccccccccccccccccccccccccccc
				</p>
		</pre>
	</body>
</html>


Javascript Logic (dynamic.js)

var top="text3";
function toTop(newTop){
  domTop=document.getElementById(top).style
domNew=document.getElementById(newTop).style
domTop.zIndex="0";
domNew.zIndex="10";
top=newTop;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *