WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Chapter 77. Displaying Random Content

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.

[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: class="docEmphStrong">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=" class="docEmphStrong">src01width01" height=
" class="docEmphStrong">height01alt01">";
}
/* 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=" class="docEmphStrong">src02width02" height=
" class="docEmphStrong">height02alt02src03width03" height=
" class="docEmphStrong">height03alt03src04width04" height=
" class="docEmphStrong">height04alt04src05width05" height=
" class="docEmphStrong">height05alt05">";
}
/* 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>

FAQ Can 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=" class="docEmphStrong">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 = class="docEmphStrong">"<a href="targetpath01"><img src=" class="docEmphStrong">src01" width=" class="docEmphStrong">width01" height=" class="docEmphStrong">height01" docEmphStrong">alt01"></a>"

}

[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: class="docEmphStrong">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 += "&#8220;";
/* Next comes the quote text. */
code += quote;
/* If you don't want to display a right quotation mark, remove
the following line. */
code += "&#8221;";
/* 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 (&#8212) with
the character of your choice, such as a colon (:). */
if (source.length != 0) {
code += "&#8212;";
}
/* 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>

code = "<" + tag + ">"

code = "<" + tag + " class=" class="docEmphStrong">classname">"

[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>

Doesn'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.