Dynamic Drive DHTML Scripts- Random Content Colors script

New Revised CSS Library Forums Web Tools

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.

Directions:

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

Select All
<script type="text/javascript"> /*********************************************** * Random Content Colors script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //specify list of random background colors to apply to CSS class "randomcolor" //For each entry, you can optionally specify a text and link color via the syntax: // "BackgroundColor:TextColor" OR "BackgroundColor:TextColor:LinkColor" var randombgcolors=["green:white:yellow", "#DDF4FF", "#FFFF97", "#CFFF9F"] var rbcssrule="" var randomnum=Math.floor(Math.random()*randombgcolors.length) if (randombgcolors[randomnum].indexOf(":")!=-1){ rbcssrule="background-color: "+randombgcolors[randomnum].split(":")[0]+";" rbcssrule+="color: "+randombgcolors[randomnum].split(":")[1]+";" } else rbcssrule="background-color: "+randombgcolors[randomnum]+";" document.write('<style type="text/css">\n') document.write('.randomcolor{'+rbcssrule+'}\n') if (randombgcolors[randomnum].split(":").length==3) //if link color specified document.write('.randomcolor a{color:'+randombgcolors[randomnum].split(":")[2]+';}\n') document.write('<\/style>') </script>

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.