Scribd
Upload
28 views4 pages

Chapter 6.2-6.3

The document describes how to create banner advertisements and slideshows using HTML and JavaScript. It explains how to load banner images into an array, display them using an <img> element, and rotate between them automatically using JavaScript timers. It also describes how to link banners to URLs so that clicking a banner goes to a new page. Finally, it discusses how to create a slideshow with forward and back buttons. The slideshow loads images into an array, displays the first image, and uses a RunSlideShow function to change the image when the buttons are clicked, looping back to the first/last image when the end is reached.

Uploaded by

34Shreya Chauhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views4 pages

Chapter 6.2-6.3

The document describes how to create banner advertisements and slideshows using HTML and JavaScript. It explains how to load banner images into an array, display them using an <img> element, and rotate between them automatically using JavaScript timers. It also describes how to link banners to URLs so that clicking a banner goes to a new page. Finally, it discusses how to create a slideshow with forward and back buttons. The slideshow loads images into an array, displays the first image, and uses a RunSlideShow function to change the image when the buttons are clicked, looping back to the first/last image when the end is reached.

Uploaded by

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

Chapter 6.2-6.

***** For execution of code, store required images and web pages in the same folder where this code files are stored.

6.2 Banner Advertisement:


The banner advertisement is the hallmark of every commercial web page. It is typically positioned near the
top of the web page, and its purpose is to get the visitor's attention by doing all sorts of clever things. Nearly
all banner advertisements are in a file format such as a GIF, JPG, TIFF, or other common graphic file
formats. Some are animated GIFs, which is a series of images contained in one file that rotate automatically
on the screen. Some are Flash movies that require the visitor to have a browser that includes a Flash plug-in.
Many banner advertisements consist of a single graphical image that does not contain any animation and
does not require any special plug-in.

Loading and displaying banner advertisement:


Three things required to include a banner advertisement in web page:
1. Create several banner advertisements using a graphics tool such as PhotoShop. One can have more than
one advertisement to rotate them on web page using a JavaScript.
2. Create an <img> element in a web page with the height and width necessary to display the banner
advertisement. Set the name attribute to a unique name. <img> element (Banner) is placed at the center of
the web page.
<body>
<center>
<img src="image1.jpg" width="400" height="75" name="RotateBanner" />
</center>
</body>
3. Build a JavaScript that loads and displays the banner advertisements with the <img> element. To load and
display banner on web page write javascript in <head> tag.
The JavaScript must do the following:
1. Load banner advertisements into an array:
Banners = new Array('NewAd1.jpg','NewAd2.jpg','NewAd3.jpg')
2. Display a banner advertisement : Call function that display Banner.
<body onload="DisplayBanners()">

3. Pause before displaying the next banner advertisement: Set the timer.
setTimeout('DisplayBanners()',1000)

Program:
<html>
<head>
<title>Banner Ads</title>
<script type="text/javascript">
Banners = new Array('s1.jpg','s2.png','s3.png','s4.png'); // Declare image array
CurrentBanner = 0; //index variable
function DisplayBanners()
{
if (document.images)
{
CurrentBanner++;
if (CurrentBanner == Banners.length)
{
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner]
setTimeout("DisplayBanners()",5000) // set timer
}
}
</script>
</head>
<body onload="DisplayBanners()"> // call to function
<center>
<img src="s1.jpg" width="400" height="275" name="RotateBanner" > // Setting banner
</center>
</body>
</html>

Linking a banner advertisement to url:


A banner advertisement is designed to encourage the visitor to learn more information about a product or service that
is being advertised. To get additional information, the visitor is expected to click the banner so that a new web page
opens. You can link a banner advertisement to a web page by inserting a hyperlink into the web page that calls a
JavaScript function rather than the URL of a web page. The JavaScript then determines the URL that is associated
with the current banner and loads the web page that is associated with the URL.

1. At the beginning of the JavaScript declare two arrays. First array is called as Banners that store url of
images(banner). Second array is called BannerLink. This array is initialized with strings that contain the URL for each
banner advertisement. It is critical that the URLs are in the same order as the banner images in the Banners array.
Banners = new Array('s1.jpg','s2.png','s3.png','s4.png');
BannerLink = new Array('page1.html','page2.html', 'page3.html','page4.html');

2. The LinkBanner() function definition inside <script> contains the statement that links the current banner to the
appropriate URL and then assigns the URL to the href attribute of the anchor tag on the web page. This statement uses
the index of the current banner as the index for the BannerLink array to identify the URL associated with the current
banner.

3. Use an anchor tag before <img> tag that displays banner. The href attribute of the anchor tag calls the LinkBanner()
function when the visitor clicks the banner.
<a href="javascript: LinkBanner()">
<img src="s4.png" width="400" height="275" name="RotateBanner" />
</a>
72
Program:
<html>
<head>
<title>Banner Ads</title>
<script type="text/javascript">
Banners = new Array('s1.jpg','s2.png','s3.png','s4.png');
BannerLink = new Array('page1.html','page2.html', 'page3.html','page4.html');
CurrentBanner = 0;
function LinkBanner()
{
document.location.href =BannerLink[CurrentBanner]
}
function DisplayBanners()
{
if (document.images)
{
CurrentBanner++;
if (CurrentBanner == Banners.length)
{
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner]
setTimeout("DisplayBanners()",5000)
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<a href="javascript: LinkBanner()">
<img src="s4.png" width="400" height="275" name="RotateBanner" >
</a>
</center>
</body>
</html>

6.3 Slide show


A slideshow is like a banner advertisement but with rotating images on the web page. A slideshow gives the
visitor the ability to change the image that's displayed: the visitor can click the Forward button to see the
next image and the Back button to see the previous image.

Creating a slide show: (With reference to below program)


1. Load banner advertisements into an array:
Banners = new Array('NewAd1.jpg','NewAd2.jpg','NewAd3.jpg')
2. Create an <img> element in a web page with the height and width necessary to display the banner
advertisement. Set the name attribute to a unique name. <img> element (Banner) is placed at the
center of the web page.
<img src="s4.png" name="PictureDisplay" width="400" height="275">
3. Create two buttons as forward and backward inside <body> tag. Both the buttons call the
RunSlideShow() JavaScript function in response to the onclick event. The RunSlideShow() function
requires one parameter, which determines whether the next or previous image is going to be
displayed. A positive parameter value causes the next banner to be shown, and a negative parameter
value results in the previous banner being displayed.
<input type="button" value="Forward" onclick="RunSlideShow(1)">
<input type="button" value="Back" onclick="RunSlideShow(-1)">

4. Define RunSlideShow() function inside <script> tag. It accepts one parameter. If the value is 1,
then the value of the CurrentPicture is incremented, causing the next slide to be displayed. If the
value is –1, then the value of the CurrentPicture is decremented, caus-ing the previous slide to be
displayed. Before displaying the slide, we must determine whether the value of the CurrentPicture
variable is within the index range of the array. This is done by making sure that the value of the
CurrentPicture variable isn't greater than the last array element (Pictures.length – 1) and that value is
not less than the first array element (less than zero). If the value is beyond the range, then the value of
the CurrentPicture variable is reset to a valid index. The last step is to assign the proper array element
containing the slide to the src attribute of the tag, which is called PictureDisplay.

Program:
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
Pictures = new Array("s1.jpg","s2.png","s3.png");
CurrentPicture = 0;
function RunSlideShow(i)
{
if (document.images)
{
if(CurrentPicture >Pictures.length-1)
CurrentPicture=0;

if(CurrentPicture<0)
CurrentPicture=Pictures.length-1;

document.PictureDisplay.src= Pictures[CurrentPicture];
CurrentPicture = CurrentPicture + i;
}
}
</script>
</head>
<body>
<p align="center"><img src="s4.png" name="PictureDisplay" width="400" height="275"/></p>
<center>
<table border="0">
<tr>
<td align="center">
<input type="button" value="Forward" onclick="RunSlideShow(1)">
<input type="button" value="Back" onclick="RunSlideShow(-1)">
</td>
</tr>
</table>
</center>
</body>
</html>

You might also like