Develop a webpage for implementing Slideshow and Banner

Laboratory Objective:

  1. Develop JavaScript to create the given banner.
  2. Develop JavaScript to create the given slide show.

Banner Advertisements

  • 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.
  • All banner advertisements are in a file format such as a GIF, JPG, TIFF, or other common graphic file formats.
  • Some are Flash movies that require the visitor to have a browser that includes a Flash plug-in.
  • Following are the steps to insert banner advertisement in webpage.
  1. Create banner advertisement using a graphics tool such as PhototShop, Paint, etc.
  2. Create an <img> element in web page with height and width to display banner advertisements.
  3. Build JavaScript that loads and display banner advertisements.

SlideShow

  • A slideshow is similar in concept to a banner advertisement in that a slideshow rotates multiple 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 slideshow for your web page is a straightforward process.
  • The <body> tag contains an <img> tag that is used to display the image on the web page.

Sample Programs

1) Develop a JavaScript program to create a simple banner advertisement.

<html>

<head>

 <title>Banner Advertisements</title>

</head>

<body bgcolor="#EEEEEE">

 <a href="https://www.javatutsweb.com">

      <img src="java-programming-ad.jpg"/>

 </a>

</body>

</html>

2) Develop a JavaScript program to create a slideshow with the group of four images, also simulate the next and previous transition between slides in your JavaScript.

<html>

<head>

    <title>Image SlideShow</title>

    <script>

    var images = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"];

    var count = 0;

    function previousImage()

    {

        if(count!=0)

            count--;

        var id = document.getElementById("imageId");

        id.src = "images/" + images[count];

    }

    function nextImage() {

        if(count!=4)

            count++;

        var id = document.getElementById("imageId");

        id.src = "images/" + images[count];

    }

</script>

</head>

<body>

<center>

    <img id="imageId" src="images/01.jpg" width="300" height="200"/>  

    <br/>

    <hr>

    <input type="button" value="< Prev Image" onclick="previousImage()"/>

    <input type="button" value="Next Image >" onclick="nextImage()"/>

</center>

</body>

</html>