Top
Home > Code Snippets > vaseline28's Snippets > Javascript

Random : colorChange()


Javascript Code
+ 0 likes
Please Register to submit score.
Bookmark and Share
Average Score  0.0 (of 0 scores)
Date Added  Jan 03, 2009
Last Updated  Jan 03, 2009
Tags  change  color  javascript  random 

Introduction

This snippet changes the color of an element which is selected from a list when called (OR it can change the color of an object to a specified color).

To Setup:
Edit line:
Code:
b='505050 6633FF 000000 765981 149387 999999 666666 666999 FFF5CF' ;
to your list of colors to randomly pick from (6 digits necessary per color) e.g.
Code:
b='color1 color2 color3';


To Use:

For specified color change - Your HTML should look like this:
Code:
<div onclick='javascript:colorChange("colorHere", "ID of the Element to change the color of")'>
(NOTE: obviously replacing the "<div" tag with the tag for what you need, "colorHere" with your color, "ID of element etc." is self explanatory :) and onclick for whatever event to trigger.)


For random color change - Your HTML should look like this:
Code:
<div onclick='javascript:colorChange("rand", "ID of the Element to change the color of")'>
(NOTE: obviously replacing the "<div" tag with the tag for what you need, "ID of element etc." is self explanatory :) and onclick for whatever event to trigger.)

Colors currently MUST have 6 characters - but that's a standard number for a Hex Color Code anyway.

Tested in Firefox and IE.


Grab the Code

function colorChange (type,docEl) {
  if (type!='rand') 
  {
      document.getElementById(docEl).style.backgroundColor=type ;
  }
  else 
  {
      b='505050 6633FF 000000 765981 149387 999999 666666 666999 FFF5CF' ;
      c=Math.random() ;  g=0 ;  f=0 ;
      randomcolor = new Array() ;
 
      while (g<b.length/7) 
      {
        randomcolor[g] = b.slice(f,b.indexOf(" ")+f) ;
        g=g+1 ; f=f+7 ;
      }
 
      l=1/g ; h=0 ;
      while (l<c) 
      {
        l=l+l ; h=h+1 ;
      }
      colorChange(randomcolor[h],docEl) ;
   }
}

Comments

  (0)  RSS

Commenting Options

Register or Login to Hawkee.com or use your Facebook or Twitter account by clicking the corresponding button below.

  
Bottom