Click here to Skip to main content
15,860,859 members
Articles / Web Development / HTML

Fading Banner

Rate me:
Please Sign up or sign in to vote.
4.37/5 (10 votes)
27 Apr 2007CPOL4 min read 64.6K   571   22   10
Article presents the Fading Banner - a lightweight yet functional alternative to both still-image ads and Flash banners.
Screenshot - fadingbanner.jpg

Introduction

Web banners are an essential part of any web site. Advertisements, news, product announcements and any other type of information can be shown on a clickable banner. Two major "types" of banners are still-image banners (where a simple image is shown rudimentary animation can be made with GIFs) and Flash banners. First ones are simple, fast, cheap and not very nice-looking, especially when it comes to dynamically changing the banner. Flash banners are awesome when it comes to visual aspect, but are quite costly to create and (sometimes) are great traffic consumers. Both share one more disadvantage: they are quite hard to install without 3rd-party banner engines.

This article presents the "Fading Banner" script, which is a lightweight (less that 6 Kb) but quite functional ad (image + link) rotation engine, written in JavaScript. It's purposes are:

  • create banner placeholders
  • arrange images into "batches" - groups of images that are shown simultaneously
  • perform periodic batch changes in a specified time interval
  • perform these changes in a neat-looking, "fade-in, fade-out" manner

As you can see, the primary goal of this script is to aid you in rotating simple image ads on your site. The secondary goal is to overcome the dumb look and feel of image changes, which is the main annoyance of still JPGs compared to Flash. The script is perfectly compatible with all mainstream browsers: Mozilla/Firefox 2, Opera 9, MS IE 6/7.

Installation of the Fading Banner requires a casual knowledge of HTML and JavaScript; to be able to change or fine-tune this script, you must be familiar with some advanced JavaScript topics (such as closures).

Fading Banner is an open-source script distributed under the zlib/libpng license.

Setup

Follow these steps:

  1. At first, run the demo (banner-test.html file in the source archive) and choose the script type you wish to install. Five modifications are available:
    • fb.js - all images in a batch emerge simultaneously and fade-out simultaneously, next batch shows up when previous fades out
    • fb-q.js - images emerge one after another ("queued"), and fade-out simultaneously
    • fb-qq.js - images emerge one after another, and fade-out one after another, in the order they emerged
    • fb-qqr.js - images emerge one after another, and fade-out one after another, in the reverse order of which they emerged
    • fb-c.js - all images in a batch emerge simultaneously and fade-out simultaneously, banners cross-fade.
  2. Include the chosen script file into your HTML page:
    ASP.NET
    <html>
     <head>
      <script type="text/javascript" src="fb.js"></script>
    
      ...
    
  3. In the body of your page, create a div element that will be the "parent" of the banner. This div must have an id attribute set:
    ASP.NET
    <html>
     ...
    
      <body>
    
       <div id="parent1" style="..."></div>
    

    Note: it is recommended that you place an img element as a child to the above div element; this image will be shown if a user has JavaScript turned off. If JavaScript is turned on, this image will be replaced by the dynamic banner.

  4. In the page's head section, create a script block that will contain a banner setup function.
    ASP.NET
    <html>
     <head>
      <script type="text/javascript" src="fb.js"></script>
    
      <script type="text/javascript">
    
      </script>
    
  5. Create a banner setup function. It will look like:
    JavaScript
    <html>
     <head>
      <script type="text/javascript" src="fb.js"></script>
    
      <script type="text/javascript">
    
        function bannerSetup()
        {
       // Create the horizontal banner, bound to "parent1" div element,
       // 390 pixels wide, with height of 90 pixels, background color equal
       // to #FF9900, batch rotation interval is equal to 5000 milliseconds
       // (5 seconds):
    
          var fb_h = new FadingBanner("parent1", "horizontal", 390, 90,
              "#FF9900", 5000);
    
         // Add an image 'h-api-competition.jpg', which is: width = 130px
         // and height = 90px,
         // and it will link to 'http://www.codeproject.com/Feature/Vista/'.
         // Image is assigned to the batch number 0:
    
          fb_h.add(0, "h-api-competition.jpg", 130, 90,
              "http://www.codeproject.com/Feature/Vista/");
    
          // Add more images/links to 0th batch:
    
          fb_h.add(0, "h-vista-gadgets.jpg", 130, 90,
              "http://www.codeproject.com/Feature/Gadgets/");
    
          fb_h.add(0, "h-interview.jpg", 130, 90,
           "http://www.codeproject.com/interview/mattpietrek13sep2000.asp");
    
          // Add a single wide image to the batch number 1:
    
          fb_h.add(1, "h-codeproject.jpg", 390, 90,
              "http://www.codeproject.com/");
    
          // Start banner operation:
          fb_h.start();
        }
    
      </script>
    
  6. Bind your banner setup function to any desired event (for example, to body's onload):
    ASP.NET
    <html>
     ...
    
      <body onload="bannerSetup()">
    
      ...
    
  7. All of the above assumes that you have prepared the images you wish to show as banners. Sample images are placed in the source archive.

API

FadingBanner object (and all its modifications) has a relatively simple API:

  • Constructor:
    JavaScript
    var fb = new FadingBanner("parent-id",  // parent element id
                              "horizontal", // "horizontal" or "vertical"
                              390,          // banner width
                              90,           // banner height
                              "#FFF",       // banner background color
                              5000);        // rotation timeout, milliseconds
  • add method - add image to a batch:
    JavaScript
    fb.add(0,                  // batch number, starting from 0
           "image.jpg",        // image URL
           130,                // image width
           90,                 // image height
           "http://link.com"); // link URL
  • start method - start banner operation:
    JavaScript
    fb.start();

Inner workings

FadingBanner has the following life cycle:

  1. Creation is simple - a single div is attached to the parent:
    JavaScript
    _construct: function(width, height, bg)
    {
      var banner = document.createElement("DIV");
      var bs = banner.style;
    
      bs.position = "relative";
      bs.top      = "0px";
      bs.left     = "0px";
      bs.width    = width + "px";
      bs.height   = height + "px";
    
      bs.display  = "none";
      bs.backgroundColor = bg || "#FFF";
    
      this.root = this.parent.appendChild(banner);
    
      return this;
    },
  2. Starting banner's operation fires the _showbatch method, that switches the display attribute of each image in the current batch to block and starts the fade-in procedure:
    JavaScript
    _showbatch: function()
    {
      var cur = this.current, l = this.images[cur].length;
    
      for(var i = 0; i < l; i++)
      {
        var img = this.images[cur][i];
        img.obj.style.display = "block";
    
        this._fade(img.obj.firstChild.id, 100, 50, 10, (i == (l - 1) ? 
        this._callLater(this, "_next") : null));
      }
    },
  3. _fade method is the key to image "switching":
    JavaScript
    _fade: function(id, destOp, rate, delta, callback)
    {
      var obj = document.getElementById(id);
    
      if(obj.timer) clearTimeout(obj.timer);
    
      var curOp = obj.filters ? obj.filters.alpha.opacity : (
          obj.style.opacity * 100.0);
      var direction = (curOp <= destOp) ? 1 : -1;
    
      delta  = Math.min(direction * (destOp - curOp), delta);
      curOp += direction * delta;
    
      if(obj.filters)
        obj.filters.alpha.opacity = curOp;
      else
        obj.style.opacity = curOp / 100.0;
    
      if(curOp != destOp)
        obj.timer = setTimeout(function() 
        { FadingBanner.prototype._fade(id, destOp, rate, delta, callback); },
            rate);
      else
        if(callback) callback();
      }
  4. After the current batch has appeared, _next method is called. It sleeps for timeout milliseconds, then starts to switch the current batch off:
    JavaScript
    _next: function()
    {
      var _out = function(_obj)
      {
        ...
    
        // fade-out current batch:
        var cur = _obj.current, l = _obj.images[cur].length;
    
        for(var i = 0; i < l; i++)
        {
          var img = _obj.images[cur][i];
          _obj._fade(img.obj.firstChild.id, 0, 50, 10, (i == (l - 1) ? 
                        function() { _go(_obj); } : null));
        }
      }
    
      setTimeout(this._callLater(null, _out, this), this.timeout);
    },
  5. After the current batch has disappeared, the next batch is ready to be shown:
    JavaScript
    _next: function()
    {
      ...
    
        var _go = function(__obj)
        {
          var cur = __obj.current, l = __obj.images[cur].length;
    
          for(var i = 0; i < l; i++)
            __obj.images[cur][i].obj.style.display = "none";
    
          l = __obj.batches.length;
          for(i = 0; i < l; i++)
            if(__obj.current == __obj.batches[i])
              break;
    
          __obj.current = (i == l - 1) ? __obj.batches[0] : 
              __obj.batches[i + 1];
    
          __obj._showbatch();
        }
    
      ...
    },
  6. _callLater method, that appeared in the code above, does the magic with closures. In short, it allows us to provide parameters for methods for later execution:
    JavaScript
    _callLater: function(obj, func, param)
    {
      param = param || null;
      return obj ? (function() { obj[func](param); }) : (function() {
        func(param); });
    },

Interested?

Usage of the Fading Banner is not limited to web banners; it is up to your imagination, programming and artistic skills to fit this script to any other web site application.

This project is in its infancy; it will be developed and expanded. If you wish to help - please vote for this article (and/or any other articles of mine). It is the best help I can dream of. For other means of help, please see the donate.txt file in the source archive.

Thank you.

History

  • April 4th 2007: initial release;
  • April 26th 2007: cross-fader script, updated article.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Freelance software engineer
Russian Federation Russian Federation
Dmitry Khudorozhkov began programming (and gaming) with his ZX Spectrum in 1989. Having seen and used all IBM PCs from early XT to the latest x64 machines, now Dmitry is a freelance programmer, living in Moscow, Russia. He is a graduate of the Moscow State Institute of Electronics and Mathematics (Applied Mathematics).

He is proficient in:

- C/C++ - more that 9 years of experience. Pure Win32 API/MFC desktop programming, networking (BSD/Win sockets), databases (primarily SQLite), OpenGL;

- JavaScript - more that 6 years of experience. Client-side components, AJAX, jQuery installation and customization;

- Firefox extensions (immediatelly ready for addons.mozilla.org reviewing) and Greasemonkey scripts. As an example of extensions Dmitry made you can search for FoxyPrices or WhatBird Winged Toolbar;

- XML and it's applications (last 2 years): XSLT (+ XPath), XSD, SVG, VML;

- ASP.NET/C# (webservices mostly);

Also familiar with (= entry level):

- PHP;

- HTML/CSS slicing.

Trying to learn:

- Ruby/Ruby-on-Rails;

- Czech language.

If you wish to express your opinion, ask a question or report a bug, feel free to e-mail:dmitrykhudorozhkov@yahoo.com. Job offers are warmly welcome.

If you wish to donate - and, by doing so, support further development - you can send Dmitry a bonus through the Rentacoder.com service (registration is free, Paypal is supported). Russian users can donate to the Yandex.Money account 41001132298694.

-

Comments and Discussions

 
GeneralImage Problem Pin
gmailfan20-Jan-09 17:05
gmailfan20-Jan-09 17:05 
GeneralRe: Image Problem Pin
Juba6-Jul-09 5:38
Juba6-Jul-09 5:38 
QuestionBug? Pin
Tor-Erik4-Feb-08 7:04
Tor-Erik4-Feb-08 7:04 
GeneralBrowser problem Pin
Sujit Gupta28-Apr-07 4:07
Sujit Gupta28-Apr-07 4:07 
GeneralRe: Browser problem Pin
Dmitry Khudorozhkov28-Apr-07 6:11
Dmitry Khudorozhkov28-Apr-07 6:11 
GeneralRe: Browser problem Pin
Kasim P1-May-07 1:44
Kasim P1-May-07 1:44 
GeneralRe: Browser problem Pin
Dmitry Khudorozhkov1-May-07 6:01
Dmitry Khudorozhkov1-May-07 6:01 
GeneralRe: Browser problem Pin
Kasim P1-May-07 6:18
Kasim P1-May-07 6:18 
GeneralNice, but ... Pin
chitty217-Apr-07 21:20
chitty217-Apr-07 21:20 
GeneralRe: Nice, but ... Pin
Dmitry Khudorozhkov18-Apr-07 1:10
Dmitry Khudorozhkov18-Apr-07 1:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.