Chapter 19: Creating Hyperlinked Ad Rotators

If you have experience working with Web pages, you may have noticed that there never seems to be enough room in the browser. With all those tables, images, frames, and text there's hardly any space left for the advertisements that you may depend on to keep your site running. While designing the Center Park Web site, imagine that over a dozen student organizations come to you requesting space on the main page of the site. Obviously, you can't accommodate all of them—at least not at the same time.

Displaying a Different Ad Each Time a Web Page Loads

Fortunately for you, Internet Explorer allows a Web page to change its content on-the-fly, through the use of the innerHTML property. You immediately started devising a way to rotate separate text advertisements each time a page loads. You can see how the code listing below is reflected in Figures 19.1 and 19.2, as the announcements are different between the two figures.

Figure 19.1: In this shot, we see the nerds getting a little publicity.

Figure 19.2: In this view, the advertisement has switched from the nerds to the school sports team.

Note

As stated here, this example is for use only within Internet Explorer.

<html>

   <head> 
     <title>Center Park Home Page - Main Page</title>

     <script language="JavaScript"> 
     <!--
          var ads = new Array( "Come watch the Center Park Bobcats!<br>Get your" + 
                               " schedules at the Union Building.", 
                               "Join us at the June Bug festival June 12-14th!" +  
                               "See you there.", 
                               "July 3rd is the first annual Adopt a Nerd" +  
                               " Day!<br>They are people too.<br>Be kind adopt" +  
                               " a nerd." );
          function getAd() 
          { 
            var ad = parseInt( Math.random() * ads.length ); 
            return( ads[ad] );
          }

          function rotateAd() 
          { 
            document.all.adCell.innerHTML = getAd();
          }

          function getCookieValue( name ) 
          {
            var c = document.cookie; 
            var begin = c.indexOf( name ); 
            if( begin < 0 ) return( "" ); 
            begin += name.length + 1; 
            var end = c.indexOf( ";", begin ); 
            if( end == -1 ) end = c.length; 
            return( c.slice( begin, end ) );
          }

          function setCustoms() 
          { 
            var bg = getCookieValue( "bgColor" ); 
            var fg = getCookieValue( "fgColor" ); 
            if( bg != "" ) document.bgColor = bg; 
            if( fg != "" ) document.fgColor = fg; 
          }
        // -->
      </script> 
   </head>

   <body onLoad="JavaScript: setCustoms(); rotateAd();">
   <center>
     <font color="red" size="6"><b>
          Center Park Home Page 
      </b></font></center>

      <br><br>

      <table width="100%">
        <tr>
            <td ID="adCell" width="50%"> 
            </td>
            <td width="50%">
              <a href="login.html">Log In</a><br>
              <a href="store.html">Store</a><br> 
              <a href="customize.html">Customize</a> 
        </td>
      </tr>
    <tr>
          <td width="100%" colspan="2">
            <hr> 
            <font face="Courier" size="5">*** School News ***</font> <br> 
            <br>
            <b>July 4th</b> - Fireworks on the mall!&nbsp;  
            Come enjoy the holiday with the Center Park faculty,  
            staff and students.<br>
            <br> 
            <b>July 3rd</b> - First annual Adopt a Nerd Day!&nbsp;  
            They are people too.<br>
            <br>
            <b>June 12th</b> - June Bug festival begins.
          </td>
        </tr>
      </table>
    </body>

</html>

Each time it loads, this page will choose a random advertisement from a list of predefined advertisements and display it in the table.