How to Code a Rotating Banner in HTML

Written by finn mccuhil
  • Share
  • Tweet
  • Share
  • Email

Changing the banners on a website can enhance a visitor's experience by lending variety to your site layout. In the case of advertising banners, it can also boost your site's revenue. Displaying different banners each time the page is visited or refreshed allows the webmaster to get the most out of valuable screen space. A number of commercial banner-rotating applications are available but are unnecessary if you insert a few lines of JavaScript into your HTML code.

Skill level:
Moderate

Other People Are Reading

Things you need

  • HTML or text editor

Show MoreHide

Instructions

  1. 1

    Open the page's HTML source code in an HTML or text editor.

  2. 2

    Define the variable needed to rotate the banners in the HEAD section of the HTML code. This example uses three separate banners:

    <SCRIPT LANGUAGE="JavaScript">

    var MaxAds = 2

    var AdNumber

    var ThisAd = new Array()

  3. 3

    Assign values to each of the banner array members. This code also belongs in the HEAD section of your HTML code directly below the variable declarations:

    ThisAd[0] = '<img src="firstbanner.jpg" width="190" height="40" border="0">'

    ThisAd[1] = '<img src="secondbanner.jpg" width="190" height="40" border="0">'

    ThisAd[2] = '<img src="thirdbanner.jpg" width="190" height="40" border="0">'

    </script>

  4. 4

    Place the script that rotates the banners in the BODY section of your HTML code:

    <SCRIPT LANGUAGE="JavaScript">

    AdNumber = Math.round(Math.random() * MaxAds)

    document.write(ThisAd[AdNumber])

    </script>

  5. 5

    Save the file and close the editor.

Tips and warnings

  • In the example, the graphic banner files are placed in the same directory as the HTML file for calling the page. These may be placed anywhere on the server by specifying the path along with the file name.
  • The MaxAds variable is declared as 2 to give a maximum of 3 array members since array counting always begins with 0 instead of 1.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.