| A common problem of many Web sites is that, while the main sections of the site get plenty of tender loving care and lots of content updates, the peripheral sections suffer from a kind of neglect. Don't feel bad. Your resources are probably limited, and you need to prioritize. Your product listings need to be accurate, and your news needs to be fresh. Under the deadline crunch, changing your About Us page places pretty low on your list. One way to spice up an otherwise neglected Web page is to let the browser do it for you with a random content generator. Take your About Us page. Instead of having the same image file load every time the visitor goes to this page, you can ask the browser to choose from one of three images, or five images, or ten images, or a hundred images. Random content doesn't have to be an image. You can randomize literally anything: the background color of the page, the typeface, the type style, the exact wording of a paragraph, and so on. This topic offers several Toolkits to give you an idea of the possibilities.  | TOOL KITRandom Image Generator This Toolkit picks a random image from a predefined set and displays it on the page. The code comes in two parts. The first part is the JavaScript function that actually chooses the random image. The second part is the line of code that appears in the body of your Web page. You place it in the HTML where you want the random image to appear. Here's the JavaScript function: [View full width] <script language="JavaScript"> /* If you're adding this script to an external JS file, you  don't need the script tags at the beginning and ending of this code. If you're embedding this script inside an HTML document, keep the script tags, and put the entire thing in the head section of the page. */ function doRandomImage() { /* The following line chooses a random number between 1 and 5. Feel free to alter the code to match the precise number of random images in your set. The formula goes like this: Math.round(Math .random() * [number of images - 1]) + 1. So, to choose from ten possible images, the code becomes Math.round(Math.random() * 9) + 1. Likewise, to choose from two possible images, the code is Math .round(Math.random() * 1) + 1. */ var x = Math.round(Math.random() * 4) + 1; /* The following line initializes the image variable, which will contain the HTML code that displays the image. */ var image; /* The following if/then blocks test the value of x and set the value of the image variable accordingly. You need one if/then block per possible image. So, if you have ten possible images, you need ten if/then blocks. But if you have only three possible images, you only need three if/thens. */ if (x == 1) { image = "<img src=\"src01\" width=\"width01\" height= \"height01\" alt=\"alt01\">"; } /* Replace src01 with the path to the first random image. Likewise, replace width01, height01, and alt01 with the width, height, and alt text of this image. The random images may be different sizes, but your page looks better when all random images share the same physical dimensions. Notice that you precede internal quotation marks with the back slash (\). This is the escape character. It tells the browser that the quotation mark is part of the variable's value. */ if (x == 2) { image = "<img src=\"src02\" width=\"width02\" height= \"height02\" alt=\"alt02\">"; } if (x == 3) { image = "<img src=\"src03\" width=\"width03\" height= \"height03\" alt=\"alt03\">"; } if (x == 4) { image = "<img src=\"src04\" width=\"width04\" height= \"height04\" alt=\"alt04\">"; } if (x == 5) { image = "<img src=\"src05\" width=\"width05\" height= \"height05\" alt=\"alt05\">"; } /* In the following line, the browser writes the HTML code in the image variable to the Web page. */ document.write(image); } </script>
That was the function. Now you need the code that calls it. Place the following bit of HTML exactly where you want the random image to appear: <script language="JavaScript">doRandomImage();</script>
|
|
 | FAQCan I use this Toolkit as a poor person's ad server? Sure. You can shuffle among several possible ad banners for the top of your page. The browser picks a random ad each time the page loads. |
|
TIP If the random image is clickable and the link always goes to the same place, no matter, the image, nest the HTML that calls the function inside anchor tags: [View full width] <a href="targetpath"><script language="JavaScript">doRandomImage ();</script></a>
However, if the link's destination depends on which random image the browser displays, build the anchor tag into the value of the image variable in the doRandomImage() function:
if (x == 1) {
image = "<a href=\"targetpath01\"><img src=\"src01\" width=\"width01\" height=\"height01\" alt=\"alt01\"></a>"
}
|
| TOOL KITRandom Quote Generator This Toolkit picks a random quote and displays it on the page. Like the previous Toolkit, there are two components: the JavaScript function itself and the call to the function from the page. The JavaScript function follows: [View full width] <script language="JavaScript"> /* If you're adding this script to an external JS file, you don't need the script tags at the beginning and ending of this code. If you're embedding this script inside an HTML document, keep the script tags, and put the entire thing in the head section of the page. */ function doRandomQuote() { /* The following line chooses a random number between 1 and 5. Feel free to alter the code to match the precise number of random quotes in your set. The formula goes like this: Math.round(Math .random() * [number of images - 1]) + 1. */ var x = Math.round(Math.random() * 4) + 1; /* The following line initializes the quote variable, which will contain the text of the quote. */ var quote; /* The following line initializes the tag variable. Set its value to whatever type of tag you want to use to mark up the quote: p, blockquote, h1, whatever. */ var tag = "blockquote"; /* The following line initializes the source variable. Its value will equals the name of the person who said the quote, along with the name of the book, speech, or article where it was said. */ var source; /* The following line initializes the code variable, which will contain the block of HTML code that displays the quote. */ var code; /* The following if/then blocks test the value of x and set the value of the quote variable accordingly. You need one if/then block per quote. If you don't want to display a source, use this line instead: source = ""; */ if (x == 1) { quote = "Quote 1 goes here."; source = "Source Line 1 goes here."; } if (x == 2) { quote = "Quote 2 goes here."; source = "Source Line 2 goes here."; } if (x == 3) { quote = "Quote 3 goes here."; source = "Source Line 3 goes here."; } if (x == 4) { quote = "Quote 4 goes here."; source = "Source Line 4 goes here."; } if (x == 5) { quote = "Quote 5 goes here."; source = "Source Line 5 goes here."; } /* Now the browser starts to build up the HTML to write to the page. */ code = "<" + tag + ">"; /* If you don't want to display a left quotation mark, remove the following line. */ code += "“"; /* Next comes the quote text. */ code += quote; /* If you don't want to display a right quotation mark, remove the following line. */ code += "”"; /* The following line adds a cite tag for the source. Even if you don't have a source, keep this line anyway. */ code += "<cite>"; /* This if/then block checks to see if the source variable is defined. If so, it adds a dash between the quote text and the source text. If you never want to display a dash between the quote text and the source text, remove this block. Or, if you want to display a character other than a dash, replace the dash code (—) with the character of your choice, such as a colon (:). */ if (source.length != 0) { code += "—"; } /* The following line adds the source, closes the cite tag, and closes the main markup tag. */ code += (source + "</cite></" + tag + ">"); /* In the following line, the browser writes the entire code string to the Web page. */ document.write(code); } </script>
To call this function, place the following HTML exactly where you want the quote to appear on the page: <script language="JavaScript">doRandomQuote();</script>
|
|
TIP For added visual interest, create a special CSS class style for your random quotes. Then, in the doRandomQuote() function, replace the following line: code = "<" + tag + ">"
with: code = "<" + tag + " class=\"classname\">"
|
| TOOL KITGenerating Random Page Properties For a real switch, this Toolkit picks a random style rule from a style sheet and applies it to the body tag of your page. Your random style rules can contain virtually anything, including background colors, link colors, typefaces, and type styles. There are three parts to this Toolkit. The first is the set of style rules from which the browser picks. The second is the JavaScript function that picks the style, and the third is the line of HTML that writes the correct body tag to your page. Here are the style rules: [View full width] <style type="text/css"> /* If your style rules appear in an external CSS file, you don't need the style tags. If you're embedding the style rules inside the HTML file, keep the style tags, and place the entire block of CSS in the head section of the page. You may include as few or as many style rules as you like, with whatever style definitions you care to add to them. The following blocks of code create three different style rules. Note that each is a special class style of the body tag. */ body.style01 { background-color: #000000; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; } body.style02 { background-color: #FFFF00; color: #FF0000; font-family: "Times New Roman", Times, serif; } body.style03 { background-color: #FFFFFF; color: #000000; font-family: "Courier New", Courier, mono; } </style>
Here comes the JavaScript function: [View full width] <script language="JavaScript"> /* If you're adding this script to an external JS file, you don't need the script tags at the beginning and ending of this code. If you're embedding this script inside an HTML document, keep the script tags, and put the entire thing in the head section of the page, either before or after the style sheet. */ function doRandomProperties() { /* The following line chooses a random number between 1 and 2. Feel free to alter the code to match the number of style rules in your set. The formula goes like this: Math.round(Math.random() * [number of style rules - 1]) + 1. */ var x = Math.round(Math.random() * 2) + 1; /* The following line initializes the style variable, which will contain the name of the class style that the browser uses. */ var style; /* The following if/then blocks test the value of x and set the value of the style variable accordingly. You need one if/then block per style rule. */ if (x == 1) { style = "style01"; } if (x == 2) { style = "style02"; } if (x == 3) { style = "style03"; } /* In the following line, the browser writes a body tag to the Web page. Note again the use of the escape character (\) to signify when a quotation mark belongs to the HTML code instead of the JavaScript statement. */ document.write("<body class=\"" + style + "\">"); } </script>
To call this function, immediately after the opening body tag of your page, add the following line of HTML: <script language="JavaScript">doRandomProperties();</script>
All told, the body section of your page looks something like this: <body> <script language="JavaScript">doRandomProperties();</script> <!-- Content of the page goes here --> </body>
|
|
| FAQDoesn't this technique give you two body tags? Very perceptive. Your Web page does indeed end up with two opening body tags: the original that appears in the HTML code, and the one that doRandomProperties() writes. The coding police can't condone this practice, since a Web page should have one and only one opening body tag. But it works. You may be wondering why you don't just replace the original body tag with the doRandomProperties() function call. You can do this if you like, but you probably shouldn't. Browsing devices that don't support JavaScript may have a hard time interpreting the HTML without a hard-coded body tag in there. |
|
|
