Manjunath C

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>

var top="p1";

var newtop;

function totop(newtop)

{

document.getElementById(top).style.zIndex="0";

document.getElementById(newtop).style.zIndex="10";

top=newtop;

}

</script>

.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>

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>

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>

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>

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>

.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>

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>

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>

<NAME>AAAAA</NAME>

<COLLEGE>BNMIT</COLLEGE>

<EMAIL>AAAAA@GMAIL.COM</EMAIL>

</STUDENT>

<NAME>BBBBB</NAME>

<COLLEGE>BNMIT</COLLEGE>

<EMAIL>BBBBB@GMAIL.COM</EMAIL>

</STUDENT>

<NAME>CCCCC</NAME>

<COLLEGE>BNMIT</COLLEGE>

<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

Search This Blog

Manjunath C

Comments

Post a Comment

Popular posts from this blog

VII-Sem-ISE Class-WEB LAB