Chapter 7
Q1)Create a link,Admission,on the SkyLight University website to display the admission calendar for the cources,Social Psychology,Botany,and Communications.The calendar appears when the user moves the mouse over the Admission Calendar link,as shown in the following figure.
<!DOCTYPE html>
<html>
<head>
<style>
a{color:orange;font-size:15px;}
th{color:red;font-size:15px;}
tr{color:red;font-size:15px;}
a{font-size:20px;color:blue;font-weight:bold;}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#coolMenu").hide();
$("#prooffers").hide();
$("#bank").mouseenter(function(){
$("#coolMenu").show(500);
});
$("#bank").mouseleave(function(){
$("#coolMenu").hide(500);
});
$("#pro").mouseenter(function(){
$("#prooffers").show(500);
});
$("#pro").mouseleave(function(){
$("#prooffers").hide(500);
});
});
</script>
</head>
<body><P>Place the mouse over the 'Admission Calender' link to view the admission calender (2013-14) for Social Psychology,Botany,and Communications.</P>
<a id-"bank" href-"">Admission Calender</a>
<div id="coolMenu" style="width:500px;height:200px;padding-top:0px;border:4px solid red;background-color:lightgrey;">
<table border="ipx solid red">
<tr>
<tr><td>1.</td><td>Social Psychology</td><td>Peter</td><td>07-04-2013</td><td>15-05-2013</td></tr>
<tr><td>2.</td><td>Botany</td><td>Mark.v.Wen</td><td>15-05-2013</td><td>30-05-2013</td></tr>
<tr><td>3.</td><td>Communications</td><td>Alice Ben</td><td>30-04-2013</td><td>10-05-2013</td></tr>
</table>
</div>
</body>
</html>
Q2)To enchanse the browsing experience of the users in the SkyLight University website,the management of the university wants the website should display the slideshow of the college campus images.When a user clicks the link,University Image Gallery,the slideshow starts,as shown in the following figure.
<HTML><HEAD><TITLE>SkyLight University</TITLE>
<link type="text/css" rel="stylesheet" href="ExternalStylesheet/homestylesheet.css"/>
<link media="screen"rel="stylesheet"href="gallery/css/colorbox.css"/>
<script src="gallery/jQueryS/jquery-1.8.3.js"></script>
<script src="gallery/jQueryS/jquery-colorbox.js"></script>
<script>
$(document).ready(function(){
$("a").colorbox({width:800,height:600,slideshow:true,current:false)};
});
</script>
<style>body{padding-left:50px;border:1px solid red;}</style></HEAD>
<BODY>
<h1>Our College Campus.....</h1><br>
<img src="images\campusimage1.png" width=210 height=160></img></a>
<img src="images\campusimage2.png" width=210 height=160></img></a>
<img src="images\campusimage3.jpg" width=210 height=160></img></a>
<img src="images\campusimage4.jpg" width=210 height=160></img></a>
<img src="images\campusimage5.jpg" width=210 height=160></img></a>
<article>
<P>The SkyLight University is a pioneer institute that distinctively contributes to the society in the field of research,learning and teacheing,and engagement.As a non-profit making organization,the University maintains its position among nation's top universities and is increasingly turning international in its outlook and reputation.</P>
<p>The Universityproposes academic programs in various streams,such as Arts,Commerce,IT,and Science.Students can opt for these programs through regular and distance education.Apart from studies,the University also aims at enchancing the overall personality of students,which enables them to grow.</p>
</article>
<details>
<summary><b>Colleges affliated:</b></summary><ul>
<li>
Denmeu College of Arts
<li>
Lebian College
<li>Armin College of Science
<li>LL College of Commerce
</details>
<BR>
<a href="gallery/contentfiles/Campusimage1.jpg" rel="collection"><b><i>University Image Gallery</i></b></a>
<a href="gallery/contentfiles/Campusimage2.jpg" rel="collection"></a>
<a href="gallery/contentfiles/Campusimage3.jpg" rel="collection"></a>
<a href="gallery/contentfiles/Campusimage4.jpg" rel="collection"></a>
<a href="gallery/contentfiles/Campusimage5.png" rel="collection"></a>
</body>
</html>
Q3)You have been assigned a task to create a Web page for the USASiteSeeing website.The Web page should dispaly the images of tourist locations is USA.In addition,you need to apply rollover effect on the images in such a way that the description of locations should appear on the image mouse over,as shown in the following figure.
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<SCRIPT>
function over(img,imgsrc)
{
img.src=imagesrc;
}
function out(img,imgsrc)
{
img.src=imagesrc;
}
</SCRIPT>
<style type="text/css">
div.panelUSA{
width:410px;
height:120px;
display:none;
margin:0px;
padding:0px;
text-align:center;
background:FFCC66;
color:black;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body bgcolor="beige">
<b><center><u><font face="Verdana" color="black" size="5">Travel</font><font face="Verdana" color="red" size="5"> Around.</font><font face="Verdana" color="black" size="5">Inc.</font></u></center></b>
<hr size="5" color="red">
<font face="Arial" color="#660033" size="4"><i>Welcome to our website<br/>There are many beautiful tourist locations to visit in USA.<br/>On this Website,you can get information about the tourist locations in USA.</i></font>
<table class="class1">
<tr>
<td colspan="5">
</td>
</tr>
<tr>
<td height="100" colspan="5"><font face="algerian" color="660033" size="6">USA</font></td>
</tr>
<tr><td colspan="8">
<div class="panelUSA">
<p><i>Some of the most prominent places to visit in USA are:</i><br/>Statue of Liberty,Central Park,Disneyland,Bellagio,South Beach,and many more...</p>
</div>
<p class="USA">Mouse over the image to view the information about the tourist locations</p></td></tr>
<td><IMG ID="Image1" src="nationalgallery.jpg" height="250" width="250" onmouseover="over(this,'NationalGOA_ex.png')" onmouseout="out(this,"nationalgallery.jpg')"/></td>
<td><IMG ID="Image2" src="sanjose.jpg" height="250" width="250" onmouseover="over(this,'sanjose_ex.png')" onmouseout="out(this,"sanjose.jpg')"/></td>
<td><IMG ID="Image3" src="statueofliberty.jpg" height="250" width="250" onmouseover="over(this,'StatueofLiberty_ex.png')" onmouseout="out(this,"statueofliberty.jpg')"/></td>
<td><IMG ID="Image4" src="WhitneyMuseumofAmericanArt.jpg" height="250" width="250" onmouseover="over(this,'Whitneymuseum_ex.jpg')" onmouseout="out(this,"WhitneyMuseumofAmericanArt.jpg')"/></td>
<tr>
</table>
</body>
</html>
Q1)Create a link,Admission,on the SkyLight University website to display the admission calendar for the cources,Social Psychology,Botany,and Communications.The calendar appears when the user moves the mouse over the Admission Calendar link,as shown in the following figure.
<!DOCTYPE html>
<html>
<head>
<style>
a{color:orange;font-size:15px;}
th{color:red;font-size:15px;}
tr{color:red;font-size:15px;}
a{font-size:20px;color:blue;font-weight:bold;}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#coolMenu").hide();
$("#prooffers").hide();
$("#bank").mouseenter(function(){
$("#coolMenu").show(500);
});
$("#bank").mouseleave(function(){
$("#coolMenu").hide(500);
});
$("#pro").mouseenter(function(){
$("#prooffers").show(500);
});
$("#pro").mouseleave(function(){
$("#prooffers").hide(500);
});
});
</script>
</head>
<body><P>Place the mouse over the 'Admission Calender' link to view the admission calender (2013-14) for Social Psychology,Botany,and Communications.</P>
<a id-"bank" href-"">Admission Calender</a>
<div id="coolMenu" style="width:500px;height:200px;padding-top:0px;border:4px solid red;background-color:lightgrey;">
<table border="ipx solid red">
<tr>
<tr><td>1.</td><td>Social Psychology</td><td>Peter</td><td>07-04-2013</td><td>15-05-2013</td></tr>
<tr><td>2.</td><td>Botany</td><td>Mark.v.Wen</td><td>15-05-2013</td><td>30-05-2013</td></tr>
<tr><td>3.</td><td>Communications</td><td>Alice Ben</td><td>30-04-2013</td><td>10-05-2013</td></tr>
</table>
</div>
</body>
</html>
Q2)To enchanse the browsing experience of the users in the SkyLight University website,the management of the university wants the website should display the slideshow of the college campus images.When a user clicks the link,University Image Gallery,the slideshow starts,as shown in the following figure.
<HTML><HEAD><TITLE>SkyLight University</TITLE>
<link type="text/css" rel="stylesheet" href="ExternalStylesheet/homestylesheet.css"/>
<link media="screen"rel="stylesheet"href="gallery/css/colorbox.css"/>
<script src="gallery/jQueryS/jquery-1.8.3.js"></script>
<script src="gallery/jQueryS/jquery-colorbox.js"></script>
<script>
$(document).ready(function(){
$("a").colorbox({width:800,height:600,slideshow:true,current:false)};
});
</script>
<style>body{padding-left:50px;border:1px solid red;}</style></HEAD>
<BODY>
<h1>Our College Campus.....</h1><br>
<img src="images\campusimage1.png" width=210 height=160></img></a>
<img src="images\campusimage2.png" width=210 height=160></img></a>
<img src="images\campusimage3.jpg" width=210 height=160></img></a>
<img src="images\campusimage4.jpg" width=210 height=160></img></a>
<img src="images\campusimage5.jpg" width=210 height=160></img></a>
<article>
<P>The SkyLight University is a pioneer institute that distinctively contributes to the society in the field of research,learning and teacheing,and engagement.As a non-profit making organization,the University maintains its position among nation's top universities and is increasingly turning international in its outlook and reputation.</P>
<p>The Universityproposes academic programs in various streams,such as Arts,Commerce,IT,and Science.Students can opt for these programs through regular and distance education.Apart from studies,the University also aims at enchancing the overall personality of students,which enables them to grow.</p>
</article>
<details>
<summary><b>Colleges affliated:</b></summary><ul>
<li>
Denmeu College of Arts
<li>
Lebian College
<li>Armin College of Science
<li>LL College of Commerce
</details>
<BR>
<a href="gallery/contentfiles/Campusimage1.jpg" rel="collection"><b><i>University Image Gallery</i></b></a>
<a href="gallery/contentfiles/Campusimage2.jpg" rel="collection"></a>
<a href="gallery/contentfiles/Campusimage3.jpg" rel="collection"></a>
<a href="gallery/contentfiles/Campusimage4.jpg" rel="collection"></a>
<a href="gallery/contentfiles/Campusimage5.png" rel="collection"></a>
</body>
</html>
Q3)You have been assigned a task to create a Web page for the USASiteSeeing website.The Web page should dispaly the images of tourist locations is USA.In addition,you need to apply rollover effect on the images in such a way that the description of locations should appear on the image mouse over,as shown in the following figure.
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<SCRIPT>
function over(img,imgsrc)
{
img.src=imagesrc;
}
function out(img,imgsrc)
{
img.src=imagesrc;
}
</SCRIPT>
<style type="text/css">
div.panelUSA{
width:410px;
height:120px;
display:none;
margin:0px;
padding:0px;
text-align:center;
background:FFCC66;
color:black;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body bgcolor="beige">
<b><center><u><font face="Verdana" color="black" size="5">Travel</font><font face="Verdana" color="red" size="5"> Around.</font><font face="Verdana" color="black" size="5">Inc.</font></u></center></b>
<hr size="5" color="red">
<font face="Arial" color="#660033" size="4"><i>Welcome to our website<br/>There are many beautiful tourist locations to visit in USA.<br/>On this Website,you can get information about the tourist locations in USA.</i></font>
<table class="class1">
<tr>
<td colspan="5">
</td>
</tr>
<tr>
<td height="100" colspan="5"><font face="algerian" color="660033" size="6">USA</font></td>
</tr>
<tr><td colspan="8">
<div class="panelUSA">
<p><i>Some of the most prominent places to visit in USA are:</i><br/>Statue of Liberty,Central Park,Disneyland,Bellagio,South Beach,and many more...</p>
</div>
<p class="USA">Mouse over the image to view the information about the tourist locations</p></td></tr>
<td><IMG ID="Image1" src="nationalgallery.jpg" height="250" width="250" onmouseover="over(this,'NationalGOA_ex.png')" onmouseout="out(this,"nationalgallery.jpg')"/></td>
<td><IMG ID="Image2" src="sanjose.jpg" height="250" width="250" onmouseover="over(this,'sanjose_ex.png')" onmouseout="out(this,"sanjose.jpg')"/></td>
<td><IMG ID="Image3" src="statueofliberty.jpg" height="250" width="250" onmouseover="over(this,'StatueofLiberty_ex.png')" onmouseout="out(this,"statueofliberty.jpg')"/></td>
<td><IMG ID="Image4" src="WhitneyMuseumofAmericanArt.jpg" height="250" width="250" onmouseover="over(this,'Whitneymuseum_ex.jpg')" onmouseout="out(this,"WhitneyMuseumofAmericanArt.jpg')"/></td>
<tr>
</table>
</body>
</html>
No comments:
Post a Comment