onmouseover

Develop and demonstrate, using Javascript, a xHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible.

Video Explaining the program:

YouTube Link: https://www.youtube.com/watch?v=vTkIcqEaOs8 [Watch the Video In Full Screen.]

HTML coding:

Info:
Div tag is a block-level element.

In HTML code we have used unique ids for the div tags: one, two, three. The same ids have been used in CSS(to assign style information) as well as in the Javascript(for functionality) file.

 
<html>
 <head>
  <title>Text Stacked On Top Of EachOther: CSS & JavaScript</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <script type="text/javascript" src="stacked.js"></script>
 </head>
 <body>
 
<div id="one" onmouseover="moveIt('one')">
Microsoft Dominates!<br />
Windows 7 is getting popular!
</div>
 
<div id="two" onmouseover="moveIt('two')">
Apple may Dominate!<br />
iTV may takeoff in the market!
</div>
 
<div id="three" onmouseover="moveIt('three')">
Google Rocks!!<br />
We all know that!!!! :-) 
</div>
 
 </body>
</html>

Cascading StyleSheet(CSS) coding:
In CSS, we assign Verdana as the font for the entire body, with font size as 24 points(pt).
Next, using the id(present in the HTML code below) we assign styling information to each div tags.
Positioning is absolute.
We have varied 20 pixels from top and 20 pixels from left for each div, so that the text overlaps on each other leaving 20 pixels(from top as well as from left) of space for mouse over.
We have also changed the background-color and foreground-color of the text inside div tags, so that each div stands out from the other.

 
body {
font-family: verdana;
font-size: 24pt;
}
 
#one {
position: absolute;
top: 200px;
left: 300px;
 
background-color: black;
color: white;
}
 
#two {
position: absolute;
top: 220px;
left: 320px;
 
background-color: cyan;
color: black;
}
 
#three {
position: absolute;
top: 240px;
left: 340px;
 
background-color: pink;
color: yellow;
}

JavaScript coding:
In Javascript, we declare a variable called topLayer and assign it the value three(which is a id name).
Next inside the function moveIt we declare another variable called oldTop, in which we store the style information of topLayer variable(which contains id “three”).
Similarly, in variable newTop we store the style information of the toTop(which we receive as parameter to moveIt function).

We can also combine those two lines of code as shown below:

1
2
3

 
    var oldTop   =   document.getElementById(topLayer).style.zIndex = "0";
    var newTop =   document.getElementById(toTop).style.zIndex = "10";

Note: Higher the value of z-index(in CSS) or zIndex(in javascript), nearer it looks to the user viewing it.

In javascript, while writing style property name, make use of capital latter immediately after the hyphen and eleminate the actual hyphen.

Example:
In CSS: background-color
In JS : backgroundColor

In CSS: z-index
In JS : zIndex

In CSS: font-weight
In JS : fontWeight

In CSS: border-style
In JS : borderStyle

etc, etc.

 
var topLayer = "three";
 
function moveIt(toTop) {
 
    var oldTop   =   document.getElementById(topLayer).style;
    var newTop =   document.getElementById(toTop).style;
 
    oldTop.zIndex   = "0";
    newTop.zIndex = "10";
 
    topLayer = document.getElementById(toTop).id;
 
 
}

At the end of the function we reset the value of topLayer variable with the id name which invoked the function.
Note:
Make sure to save all these (.html, .css and .js : HTML, CSS and Javascript) files in the same folder or else change the path in the header as appropriate.

Tag: onmouseover

Text Stacking: CSS & JavaScript