New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

NS6+ IE5+ Opera 7+

Random Content Colors script

Author: Dynamic Drive

Description: This script draws inspiration from the age old random background color scripts, but to create something practical! It lets you randomly change the background color of select elements on your page, such as a DIV or table cell, each time the page loads. Not only that, you can optionally change the element's text and link color at the same time. It's a highly effective yet simple way to maintain your visitors' focus on content you want to highlight on the page, such as an announcement or advertisement.

Demo (try reloading page to see a random background (and text) color applied to the below:

This DIV randomly changes background color, and for one color combination, text color, and link color as well.
This table cell's colors randomly changes.
Another table cell.

Another table cell.


Directions: Developer's View

Step 1: Insert the following script in the HEAD section of your page

Select All

Once the script is installed, you can easily randomize the colors of any element by giving it a class="randomcolor" attribute. For example:

<div class="randomcolor">...</div>

Can it get any easier?

Configuration info

As explained in the script comments, the list of random background colors to apply to desired elements is done via the line:

var randombgcolors=["green:white:yellow", "#DDF4FF", "#FFFF97", "#CFFF9F"]

The first entry "green:white:yellow" illustrates how you can split a background color value into "background color:text color:link color" instead. This is useful if the specified background is dark, for example, and it's necessary to change the other two colors in response.