1.      a). Develop and demonstrate, using JavaScript script, 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.
b). Modify the above document so that when a paragraph is moved from the                                                                                                                                                                                                                                                                   top stacking position, it returns to its original position rather than to the bottom.
p3a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"                    "http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">
<html>
<head>
<title>Program 3a</title>
<script type="text/javascript">
var top="p1";
var newtop;
function totop(newtop)
{
document.getElementById(top).style.zIndex="0";
document.getElementById(newtop).style.zIndex="10";
top=newtop;
}
</script>
<style type="text/css">
.para1{position:absolute;
       top:0;
       left:0;
       Z-index:0;
       color:blue;
       font-size:20pt;
       border-style:solid;
       background-color:ivory;
      }
.para2{position:absolute;
       top:25px;
       left:50px;
       Z-index:0;
       color:red;
       font-size:22pt;
       border-style:solid;
       background-color:ivory;
      }
.para3{position:absolute;
       top:45px;
       left:80px;
       Z-index:0;
       font-size:24pt;
       border-style:solid;
       background-color:ivory;
      }
</style>
</head>
<body>
<p class="para1" id="p1" onmouseover="totop('p1')">
This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.</p>
<p class="para2" id="p2" onmouseover="totop('p2')">
This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.
</p>
<p class="para3" id="p3" onmouseover="totop('p3')">
This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.
</p>
</body>
</html>
OUTPUT


P3b.html
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
                    "http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">
<html>
<head>
<title> Program 3b </title>
<script type="text/javascript">
var top="p1";
var newtop;
function totop(newtop)
{
domTop=document.getElementById(top).style;
domNew=document.getElementById(newtop).style;
domTop.zIndex="0";
domNew.zIndex="10";
top=newtop;
}
function toOriginal()
{
 document.getElementById("p1").style.zIndex=0;
 document.getElementById("p2").style.zIndex=0;
 document.getElementById("p3").style.zIndex=0;
}
</script>
<style type="text/css">
.para1{
       position:absolute;
       top:0;
       left:0;
       Z-index:0;
       font-size:20pt;
       color:blue;
       border-style:solid;
       background-color:ivory;
      }
.para2{
       position:absolute;
       top:25px;
       left:50px;
       Z-index:0;
       color:red;
       font-size:22pt;
       border-style:solid;
       background-color:ivory;
}
.para3{
       position:absolute;
       top:50px;
       left:90px;
       Z-index:0;
       font-size:24pt;
       border-style:solid;
       background-color:ivory;
       }
</style>
</head>
<body>
<p class="para1" id="p1" onmouseover="totop('p1')" onmouseout="toOriginal()">
This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph. This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph. This is a first paragraph.This is a first paragraph.This is a first paragraph.This is a first paragraph.
</p>
<p class="para2" id="p2" onmouseover="totop('p2')" onmouseout="toOriginal()">
This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.This is a second paragraph.
</p>
<p class="para3" id="p3" onmouseover="totop('p3')" onmouseout="toOriginal()">
This is third paragraph.This is third paragraph.This is third paragraph.This is third  paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph. This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.This is third paragraph.
</p>
</body>
</html>
OUTPUT

2.      a).Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include USN, Name, Name of the College, Brach, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.
b).Create an XSLT style sheet for one student element of the above                                                             document and use it to create a display of that element.
p4a.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="vtu.css"?>
<VTU>
            <STUDENT>
                        <USN>1BG13CS001</USN>
                        <NAME>AAAAA</NAME>
                        <COLLEGE>BNMIT</COLLEGE>
                        <BRANCH>ISE</BRANCH>
                        <YOJ>2013</YOJ>
                        <EMAIL>AAAAA@GMAIL.COM</EMAIL>
            </STUDENT>
            <STUDENT>
                        <USN>1BG13CS002</USN>
                        <NAME>BBBBB</NAME>
                        <COLLEGE>BNMIT</COLLEGE>
                        <BRANCH>ISE</BRANCH>
                        <YOJ>2013</YOJ>
                        <EMAIL>BBBBB@GMAIL.COM</EMAIL>
            </STUDENT>
            <STUDENT>
                        <USN>1BG13CS003</USN>
                        <NAME>CCCCC</NAME>
                        <COLLEGE>BNMIT</COLLEGE>
                        <BRANCH>ISE</BRANCH>
                        <YOJ> 2013</YOJ>
                       <EMAIL>CCCCC@GMAIL.COM</EMAIL>
            </STUDENT>           
</VTU>
vtu.css
USN{color:magenta;font-family:verdana;font-size:20pt;}
NAME{color:blue;font-family:verdana;font-size:20pt;}
COLLEGE{color:black;font-family:verdana;font-size:20pt;}
BRANCH{color:maroon;font-family:verdana;font-size:20pt;}
YOJ{color:purple;font-family:verdana;font-size:20pt;}
EMAIL{color:green;font-family:verdana;font-size:20pt;}
STUDENT{display:block;margin-top:30px;border-style:solid;}

OUTPUT


Comments

Popular posts from this blog

ADA Exercise Solutions