Scribd
Upload
44 views

Exp 15

The document describes how to create a banner advertisement and slideshow for a web page. It explains that banner ads are typically images or animations at the top of a page. Creating a banner involves loading images into an array, displaying them with an <img> tag, and using JavaScript to rotate between the images. A slideshow is similar but allows forward and back buttons to cycle through images. The code examples show how to load images into an array, display the initial image, and use functions to change the image source when the buttons are clicked.

Uploaded by

34 Vedant Lad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

Exp 15

The document describes how to create a banner advertisement and slideshow for a web page. It explains that banner ads are typically images or animations at the top of a page. Creating a banner involves loading images into an array, displaying them with an <img> tag, and using JavaScript to rotate between the images. A slideshow is similar but allows forward and back buttons to cycle through images. The code examples show how to load images into an array, display the initial image, and use functions to change the image source when the buttons are clicked.

Uploaded by

34 Vedant Lad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Experiment No.

15
Aim: Develop a web page for implementing slideshow and banner.
Theory:
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)

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

Programs: For creating Banner


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

Write/attach your own program output:


Program: For creating slide show
<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>

Write/attach your own program output:

Conclusion:
With all the concepts based on creation of banner and slideshow , successfully executed all programs with
correct output.

You might also like