Platform-Independence

The problem with the previous examples is that they only work in an Internet Explorer browser. Netscape browsers are unable to reference HTML elements directly through an ID attribute. Thankfully, there is a workaround, but it is slightly more complicated than the previous examples. Instead of replacing HTML in a table cell, this time around I will have to replace HTML tag parameter values. In the following example, all of the link and image tags are already in place once the page loads:

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

    <script language="JavaScript"> 
    <!--
         var ads = new Array( 2 ); 
         ads[0] = new Array( "Bobcats.html", "Bobcats.jpg" ); 
         ads[1] = new Array( "JuneBug.html", "JuneBug.jpg" );

         function getAd() 
         { 
            var ad = parseInt( Math.random() * ads.length ); 
            return( ads[ad] );
         }

         function rotateAd() 
         { 
           var newAd = getAd();

           with( document ) 
         { 
           for( i = 0 ; i < links.length ; i++ ) 
           {
             if( links[i].name == "ad" ) 
             {
                links[i].href = newAd[0];
             }
           }
           for( i = 0 ; i < images.length ; i++ )
           { 
             if( images[i].name == "ad" ) 
             { 
                images[i].alt = images[i].src = newAd[1]; 
             }
           }  
         }
         window.setTimeout( "rotateAd()", 10000 ); 
       }

         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%">
         <a href="Main.html" name="ad">
           <img src="Bobcats.jpg" border="0" name="ad"> 
         </a>
       </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>

Every ten seconds, the anchor tag and image tag gets updated with a new href or src value respectively. This provides the same functionality as the previous examples, but is slightly longer and harder to read than before.