Scribd
Upload
38 views9 pages

Sixth Chapter

This document discusses various techniques for adding menus, navigation, and banners to web pages using JavaScript. It describes how to create a status bar that displays static or changing messages. It also provides examples of how to create rotating banner advertisements that cycle through images at intervals and how to link banners to external URLs. The document shows how to build a pulldown menu and create a slideshow that transitions between images using forward and back buttons. It provides code samples and explanations for each technique.

Uploaded by

manasikotwal00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views9 pages

Sixth Chapter

This document discusses various techniques for adding menus, navigation, and banners to web pages using JavaScript. It describes how to create a status bar that displays static or changing messages. It also provides examples of how to create rotating banner advertisements that cycle through images at intervals and how to link banners to external URLs. The document shows how to build a pulldown menu and create a slideshow that transitions between images using forward and back buttons. It provides code samples and explanations for each technique.

Uploaded by

manasikotwal00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Menus, Navigation and Web Page Protection

6.1Status Bar
Status bar is present at the bottom of browser window. It enhances the readability of the text
present on the web page, when user scrolls over it.
The status property sets the text in the status bar at the bottom of the browser, or returns the
previously set text.
6.1.1Build a static message
We can build a static message which is displayed on the status bar. This message remains
permanently present in the status bar.
Syntax
window.status

<!DOCTYPE html>
<html>
<body>
<p>Look at the text in the status bar</p>
<p><b>Note :< /b> This property does not work in default configuration of IE, Firefox, Chrome, Safari or
Opera 15+. </p>
<script>
window.status = "Some text in the status bar!!";
</script>
</body>
</html>
6.1.2Changing the message using rollover
We will use the onMoueOver and onMouseOut events of a hyperlink to display or manage the
messages.
We can use window.status on OnMouseOver event to change the status bar.you can display
status bar message whenever your users hover your hyperlinks.

<!DOCTYPE html>
<html>
<head>
<title>javascript status bar</title>
</head>
<body>
<a href=
onMouseOver="window.status='welcome';return true"
onMouseOut="window.status=;return true">
hello,click here and check the status bar
</a>
</body>
</html>
6.1.3 Moving the Message along the status bar
For moving the message in the status bar we need to increment the current position of the text
one character ahead in a loop. This will give us the effect of moving the text. This will be
displayed by using the set Interval function, which displays the moved text after some
milliseconds.

<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0
var maxScroll = 100
var blanks = ""
function scrollText(text, milliseconds) {
window.setInterval("displayText('"+text+"')", milliseconds)
}
function displayText(text) {
window.defaultStatus = blanks + text
++scrollPos
blanks += " "
if(scrollPos > maxScroll) {
scrollPos = 0
blanks = ""
}
}
</script>
</head>
<body onload="scrollText('Watch this text scroll!!!', 300)">
<p>Watch the text scroll at the bottom of this window!</p>
</body>
</html

6.2Banner
Loading and displaying the Banner Adverrtisement
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 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.

Creating Rotating Banner Ads


 Rotating banners ads comprises several banner images that constantly rotate on a
webpage at a fix time interval.
 You can create these banner images using standard graphics tools.
 Let’s create four banner images and name them as banner1.jpg, banner2.jpg, banner3.jpg
and banner4.jpg
 The JavaScript starts by declaring an array to store the banner images using the new
Array keywords, as follows:
 MyBanners=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
 Each element in the array is assigned with an index, starting from 0. In our example,
banner1.jpg is assigned with index 0, banner2.jpg is assigned with index 1, banner3.jpg is
assigned with index 2 and banner3.jpg is assigned with index 3.
 To track the index of the current banner, we can assign the index to a variable. Here we
use the variable banner and initialize it with a value 0 to load the first banner image.
 Next, we create a function ShowBanners which will display all the banner images at fix
interval.
 This can be achieved by incrementing the index values using the statement banner+
+ and when the index value is equal to the total number of elements in the array(denoted
by MyBanners.length), the index value is set back to 0, which is the index of the first
banner.
banner++
if(banner==MyBanners.length)
{
banner=0
}
 The process is repeated at a fix time interval using the setTimeout ( ) function.
The setTimeout ( ) function comprises two arguments, the first is the function to be
activated, i.e the ShowBanners ( ) function and the second one is the duration measured
in milliseconds, therefore 1000 is equivalent to 1 second so 5000 is equal to 5 seconds.
 The final part of the JavaScript is to call out the ShowBanners ( ) function using
the onload method

<html>
<head>
<script language="Javascript">
var MyBanners=new Array('mango.jpg','orange.jpg','banana.jpg','kiwi.jpg')
banner=0
function ShowBanners()
{
if (document.images)
{
banner++;
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="mango.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body>
</html>
Script Explanation

1)we have created an array of four image files.Each image is considered as one banner.

2)In the function showBanners, the images are displayed continuously one by one with some
time interval.

3)The time interval can be set using the built in function setTimeout(), by calling the function
showBanners repeatedly.

Linking a banner Advertisement to URL

In any web page web site the banner mainly for advertising purpose. Hence it is essential to link
those banners with their corresponding webite.For Example –suppose you are going through
some web site and if some banner flashes on your web page that makes an advertisement about
online mobile store, then it can tempt you go through such online mobile store. In such case, this
flashing banner must be linked up with the corresponding website.

Following is a simple example-in which I have created four banner of four famous websites of
google, gmail, facebook and Wikipedia. If user click on the banner of ‘Google’ then goggles web
page must be displayed
<html>
<head>
<script language="Javascript">
var MyBanners=new Array('mango.jpg','orange.jpg','banana.jpg','kiwi.jpg');
var MyBannerLinks=new
Array('www.google.com/','www.gmail.com/','www.facebook.com/','www.wikipedia.com/');
banner=0;
function ShowLinks()
{
document.location.href="http://"+MyBannerLinks[banner];
}
function ShowBanners()
{
if (document.images)
{
banner++;
if (banner==MyBanners.length)
{
banner=0;
}
document.ChangeBanner.src=MyBanners[banner];
setTimeout("ShowBanners()",5000);
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>

Output:

Slide show
 A slideshow is used to cycle through elements.a slide how is a presentation ofa series of
still images on a projection screen or electronic display device, typically in a prearranged
sequence.
 In Javascript we can create a slide show by using the array of images.

Creating a javascript

 For creation of slide show we need to have some images file. These images can be
created using some Graphics tool or some photographs.
 In the following JavaScript the slide show is created and the transition from one slide to
another can be possible using the Back and Forward button.

<html>
<head>
<script>
var myslides=new Array('mango.jpg','orange.jpg','banana.jpg','kiwi.jpg');
var i=0;
function displayslides(slidenumber)
{
i=i+slidenumber;
if(i>myslides.length-1)
{
i=0;
}
if(i<0)
{
i=myslides.length-1;
}
document.slideid.src=myslides[i];
}
</script>
</head>
<body>
<img src="banana.jpg" name="slideid" width="200" height="200">
<br>
<form>
<input type="button" value="back" onclick="displayslides(-1)">
<input type="button" value="forward" onclick="displayslides(1)">
</form>
</body>
</html>
Script Explanation:
In above Javascript
1)An array named Myslide is created in which the four image files act as four slides.
2)In <body> section, the image tag is used to place the first lide.
3)Then two buttons are placed one is for moving back and one is for moving forward
For each transition the function displaylides is called by passing intial values -1 or+1
values.
4)displaylide is a simple function in which the index i of slide is incremented by
one.when the slide show reaches to maximum slide number it is reset and the slide show
is possible from beginning.
Menus
Creating pulldown Menu
A web site is a normally a collection of various web pages. A visitor to this site navigates from one page to
another. If a menu of these web pages is created then it become easy for a visitor to select appropriate web
page.
The <select> element is used to crweate a pulldown mwnu.
The <option> tags inside the <select> element define the available options in the list.
<html>
<head>
<script language="Javascript">
function display(ch)
{
mypage =ch.option[ch.electedInex].value;
if(mypage!="")
{
window.lovation=mypage;
}
}</script>
</head>
<body onload="document.form1.mymenu.selecteindex=0">
<form action="" name="form1">
<select name="mymenu" onchange="display(this)">
<option>books</option>
<option value="fiction.html">Fiction</option>
<option value="nonfiction.html">Fiction</option>
</select>
</form>
</body>
</html>
Output:

Dynamically Changing Menu

<html>
<head>
<script>
var boyslist= new Array('sunil','aditya','siddarth');
var girlslist=new Array('Archna','shraddha','swati');

function displaystudents(Class)
{
for(i=document.form1.students.options.length-1;i>0;i--)
{
document.form1.students.options.remove(i);
}
var category=Class.options[Class.selectedIndex].value;
if(category!="")
{
if(category=='1')
{
for(i=1;i<=boyslist.length;i++)
{
document.form1.students.options[i]=new Option(boyslist[i-1]);
}
}
if(category=="2")
{
for(i=1;i<=girlslist.length;i++)
{
document.form1.students.options[i]=new Option(girlslist[i-1]);
}
}
}
}
</script>
</head>
<body onload="document.form1.classlist.selectedIndex=0">
<h2>dynamically changing meny</h2>
<form name ="form1">
<select name="classlist" onchange="displaystudents(this)">
<option value="0">Class</option>
<option value="1">boys</option>
<option value="2">girls</option>
</select>
<select name="students">
<option value="0">students</option>
</select>
</form></body></html>
Output:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy