Unit VI - Menus, Navigation and Web Page Protection

Unit VI - Menus, Navigation and Web Page Protection
Status: The status property sets the text in the status bar at the bottom of the browser,
or returns the previously set text.
Note: The status property does not work in the default configuration of IE, Firefox,
Chrome, Safari or Opera 15 and newer.
Syntax
window.status = string; var value = window.status;
Builds a static message

Example:
<html>
<head>
<title> Window Status Property</title>
</head>
<body>
<h1>Windows Status Message</h1>
<p>
Look the text in the status bar displayed
at the bottom of the browser
</p>
<input type=”button” value=”Show Message Status” onclick=”showStatus()”>
<script>
function showStatus(){
window.status = "Welcome to Status of browser";
}
</script>
</body>
</html>
Changing the message using rollover:

Example:
<html>
<head>
<title> Window Status Property</title>
</head>
<body>
1
<h1>Windows Status Mouse Over Message</h1>
<a href="#" onMouseOver="window.status='Welcome to My Programs Home page';
return true" onMouseOut="window.status='Enjoy reading JavaScript program'; return
true">Show Status Messages on mouseover and mouse out</a>
</body>
</html>
Moving the message along the status bar:
Example:
<html>
<head><title>Status Bar Scrolling Message</title></head>
<body>
<h3>Status Bar Scrolling Message</h3>
<input type="button" value="Click to Scrolling" onclick="scrollMsg()">
<script>
var msg = "Hello Students this is the scrolling message demo";
function scrollMsg(){
window.status = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
setTimeout("scrollMsg()",150);
}
</script>
</body>
</html>
2
Banner - loading and displaying banner advertisements. Linking a banner
advertisement to url
Displaying banners ads is a common practice for showing advertisements on web
pages to the visitors. Banners ads are normally created using standard graphic tools
such as Photoshop, Paintbrush Pro, and other software. Banner ads can be static or
animated. Animated images are animated GIF files or flash movies. Flash movies are
created using Macromedia Flash and the browsers must have installed a flash plugin to
view the movies. On the other hand, you can create some animated effect using
JavaScript, like rotating static banner ads at a certain time interval.
Rotating banners ads comprises several banner images that constantly rotate on a
webpage at a fixed time interval.
<html>
<head><title>Display Banner</title> </head>
<body onload="showBanner()">
<img src="1.jpg" width="900" height="120" name="bnrImage" />
<script>
var mybnr = new Array('1.jpg', '2.jpg');
var bnr = 0;
function showBanner() {
if (document.images) {
bnr++;
if (bnr == mybnr.length) {
bnr = 0;
}
document.bnrImage.src = mybnr[bnr];
setTimeout("showBanner()", 1000);
}
}
</script>
</body>
</html>
3
Linking a banner advertisement to url:
Creating rotating banner images will provide the visitor to your webpage with some
basic information. However, if you want the visitor to get more information by clicking on
the banner images, you need to create rotating banner ads that contain URL links.
<html>
<head><title>Display and Link Banner</title></head>
<body onload="ShowBanners()">
<a href="javascript: showLink()">
<img src="banner1.jpg" width="900" height="120" name="bnrImage" /></a>
<script>
mybnr = new Array('1.jpg', '2.jpg');
mybnrlinks = new Array('http://www.google.com/', 'http://www.flipcart.com/');
bnr = 0;
function showLink() {
document.location.href = mybnrlinks[bnr++];
}
function showBanner() {
if (document.images) {
bnr++;
if (bnr == mybnr.length) {
bnr = 0;
}
document.bnrImage.src = mybnr[bnr];
setTimeout("showBanner()", 5000);
}
}
</script>
</body>
</html>
4
SlideShow – creating a slide show
The JavaScript code for the slideshow is almost similar to the JavaScript code of the
rotating banners but it gives control to the user to choose the banner ads he or she
wants to see by clicking on the forward and backward buttons.
<html>
<head><title>Slide Show</title></head>
<body>
<img src='1.jpg' name='dispSlide' width='900' height='120' />
<input type='button' value='back' onclick='showSlide(-1)'>
<input type='button' value='next' onclick='showSlide(1)'>
<script>
myslide = new Array('1.jpg', '2.jpg');
slide = 0;
function showSlide(slideNumber) {
{
slide = slide + slideNumber;
if (slide > myslide.length - 1) {
slide = 0;
}
if (slide < 0) {
slide = myslide.length - 1;
}
document.dispSlide.src = myslide[slide]
}
}
</script>
</body>
</html>
Menus- creating a pulldown menu, dynamically changing a menu, validating

menu selection, Floating menu, chain select menu, tab menu, pop-up menu,
sliding menu, highlighted menu, folding a tree menu, context menu, scrollable
menu, sidebar menu.
<html>
<head><title>Select pull down menu</title></head>
<body>
<h3>Select Pull down menu</h3>
5
<form name="f1">
<select id="sub" onchange="myFunction()">
<option value="0">Please select any Subject</option>
<option value="1">AJP</option>
<option value="2">CSS</option>
</select>
<p>You have selected: <input type="text" id="show"> </p>
</form>
<script>
with(document.f1){
function myFunction(){
document.getElementById("show").value = sub.options[sub.selectedIndex].text;
}
}
</script>
</body>
</html>

Unit VI - Menus, Navigation and Web Page Protection

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit VI - Menus, Navigation and Web Page Protection

Uploaded by

Copyright:

Available Formats

Unit VI - Menus, Navigation and Web Page Protection

Builds a static message

Changing the message using rollover:

Moving the message along the status bar:

Menus- creating a pulldown menu, dynamically changing a menu, validating

You might also like