|
|
After studying how the students at Center Park use their Web site, you decide that each ad isn't getting enough screen time because students tend not to reload the page over and over again. Not only that, they need a way to hyperlink the text so that they can go directly to the page that the ad describes.
With a little more work, you can create self-changing and hyperlinked text ads. By using the Window object's setTimeout() function, you can set the ads to change every 10 seconds. By simply changing the content of the ads themselves, you can make them hyperlinked. See page 482 for the result of the changes.
<html> <head> <title>Center Park Home Page - Main Page</title> <script language="JavaScript"> <!-- var ads = new Array( "<a href='Bobcats.html'>Come watch the Center " + " Park Bobcats!<br>Get your schedules at the" + " Union Building.</a>", "<a href='JuneBug.html'>Join us at the June" + " Bug festival June 12-14th! See you there.</a>", "<a href='SchoolEvents.html'>July 3rd is the" + " first annual Adopt a Nerd Day!<br>They are" + " people too — be kind adopt a nerd.</a>" ); function getAd() { var ad = parseInt( Math.random() * ads.length ); return( ads[ad] ); } function rotateAd() { document.all.adCell.innerHTML = getAd(); 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%"> </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! Come enjoy the holiday with the Center Park faculty, staff and students.<br> <br> <b>July 3rd</b> - First annual Adopt a Nerd Day! They are people too.<br> <br> <b>June 12th</b> - June Bug festival begins. </td> </tr> </table> </body> </html>
As you can see in Figures 19.3, the advertisements not only rotate, but are also hyperlinked. This is quite useful (as will be seen in the completed Center Park Web site) in taking the most advantage of limited screen real estate: in other words, multiple groups and organizations can advertise in the same space (rotating their ads in and out every few seconds) with each ad hyperlinked to a page specific to that group, so if a visitor wants more information, he or she can click over to the hyperlinked page and get it.
This site not only displays a different hyperlinked ad each time it is loaded, but it also automatically rotates the ads after a ten-second delay. The JavaScript statement
window.setTimeout( "rotateAd()", 10000 );
creates a timer to rotate the ad after ten seconds by calling the rotateAd() function, which then calls the same statement again. Technically, this is an infinite loop, but since there is a tensecond delay between each iteration, it is acceptable.
As soon as the students see what you are capable of doing, they immediately start sending you ads in the form of images to replace their non-eye-catching text ads. Replacing their text ads with images is a very easy task. Because the innerHTML field of the HTML elements allows you to replace any HTML, all you need to do is put image tags where the text is. Here is an example of just that:
<html>
<head>
<title>Center Park Home Page - Main Page</title>
<script language="JavaScript">
<!--
var ads = new Array( "<a href='[Bobcats.html'>" +
"<image src='Bobcats.jpg' border='0'>" +
"</a>",
"<a href='JuneBug.html'>" +
"<image src=' JuneBug.jpg' border='0'>" +
"</a>" );
function getAd()
{
var ad = parseInt( Math.random() * ads.length );
return( ads[ad] );
}
function rotateAd()
{
document.all.adCell.innerHTML = getAd();
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%">
</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!
Come enjoy the holiday with the Center Park faculty,
staff and students.<br>
<br>
<b>July 3rd</b> - First annual Adopt a Nerd Day!
They are people too.<br>
<br>
<b>June 12th</b> - June Bug festival begins.
</td>
</tr>
</table>
</body>
</html>
At last, you have an ad rotator that is exactly what the students wanted (See Figures 19.4). Not only is each ad made up of an image, but the ads are also hyperlinked and self-rotating. Now, if only this technique were platform-independent.
|
|
