links with multiple colors

**tpravioti** · 10-27-2009, 08:48 AM

hi everyone..
i am making a simple menu with links and i want to make my links to be colored onmouseover, but not with style="color:red;" etc..
i want to take the colors from an array one by one..
here is the code:

Code:

<!----------------------------------------------------------------------->
<html>
<head>
<style type="text/css">
ul {
	float:left;
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none; }
	
a {
	float:center;
	width:6em;
	text-decoration:none;
	color:grey;
	padding:0.2em 1.0em;
	cursor: pointer;	}
	
li { display:inline; }
</style>
</head>

<body>
<center>
<br />

<ul id="menu">
<li><a href="#" onmouseover="colorize(0);"><b>home</b></a></li>
<li><a href="#" onmouseover="colorize(1);"><b>products</b></a></li>
<li><a href="#" onmouseover="colorize(2);"><b>sitemap</b></a></li>
<li><a href="#" onmouseover="colorize(3);"><b>shop</b></a></li>
<li><a href="#" onmouseover="colorize(4);"><b>contact</b></a></li>
<li><a href="#" onmouseover="colorize(5);"><b>links</b></a></li>
</ul>

<script>

//Define array of colors
var mycolors=['red','blue','green','yellow','black','orange','purple','pink','brown'];

function colorize(color)
{ 
		document.getElementById('menu').style.color=mycolors[Math.floor(Math.random()*mycolors.length)];
}

</script>

</center>
</body>
</html>
<!----------------------------------------------------------------------->

any ideas? thanks...

**jscheuer1** · 10-27-2009, 09:57 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Colorize Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul {
 text-align: center;
 padding: 0;
 margin: 0;
 list-style-type: none;
}

a {
 width: 6em;
 color: gray;
 text-decoration: none;
 padding: 0.2em 1.0em;
 font-weight: bold;
}

li {
 display: inline;
}
</style>
<script type="text/javascript">
(function(){
 //Define array of colors
 colorize.mycolors = ['red', 'blue', 'green', 'yellow', 'black', 'orange', 'purple', 'pink', 'brown'];
 
 function colorize(e){
  e = e || window.event;
  var el = e.target || e.srcElement, c;
  if(e.type === 'mouseover'){
   c = colorize.mycolors;
   el.style.color = c[Math.floor(Math.random() * c.length)];
  }
  else {
   el.style.color = '';
  }
 }
 
 colorize.setup = function(){
  var anc = document.getElementById('menu').getElementsByTagName('a'), i = anc.length - 1;
  for (i ; i > -1; --i){
   anc[i].onmouseover = anc[i].onmouseout = colorize;
  }
 };
 
 onload = colorize.setup;
})();
</script>
</head>

<body>

<div>
<br>
<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">sitemap</a></li>
<li><a href="#">shop</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">links</a></li>
</ul>
</div>

</body>
</html>

**tpravioti** · 10-27-2009, 10:27 AM

thanks a lot!!

though i have some more questions...(sorry for being annoying)
1.can i make it simpler than this or not??

2.also can i ensure that one color will not be used on another link in my page(for Math.random())?
(for example: the color 'red' is used on the 1st link and only there)

3.if i don't want to use the function Math.random() and i want each link to take its color from the array with the line
(for example: the 1st link takes the 1st color, the 2st link takes the 2st color, etc)

**jscheuer1** · 10-27-2009, 10:39 AM

That's about as simple as it can be while still keeping valid content, style and behavior each separate, and insulating the code from most conflicts (all conflicts except potential onload conflicts are impossible with this current code as written). Unless that is, if you wanted to use jQuery or some other script library, which could allow for less branching. But that's deceptive, the branching is done in the library, and adding any library to something so simple would be ridiculous, unless the library were required by other scripts on the site.

That said, I'm sure you could probably pair it down a little, code almost always can have something removed from it.

**tpravioti** · 10-27-2009, 02:21 PM

can i ensure that one color will not be used on another link in my page(for Math.random())?
(for example: the color 'red' is used on the 1st link and only there)

and if i don't want to use the function Math.random() and i want each link to take its color from the array with the line
(for example: the 1st link takes the 1st color, the 2st link takes the 2st color, etc)

suggestions?

**jscheuer1** · 10-27-2009, 05:34 PM

The first idea is possible, but random means random, so there is always the possibility of a repeat of one color on two links unless you make the code fairly complex, I'll probably look into that. But here's a solution that will minimize the chance of a repeat, while maintaining randomness:

Code:

<script type="text/javascript">
(function(){
 //Define array of colors
 colorize.mycolors = ['red', 'blue', 'green', 'yellow', 'black', 'orange', 'purple', 'pink', 'brown'];

 //comment out the below line if you want the same initial colors each time the page loads
 colorize.mycolors.sort(function(){return 0.5 - Math.random();});
 
 function colorize(e, el, i){
  e = e || window.event;
  el.style.color = e.type === 'mouseover'? colorize.mycolors[i] : '';
 }

 colorize.set = function(anc, i){
  anc.onmouseover = anc.onmouseout = function(e){colorize(e, anc, i);};
 };

 colorize.setup = function(){
  var anc = document.getElementById('menu').getElementsByTagName('a'), i = anc.length - 1;
  for (i ; i > -1; --i){
   colorize.set(anc[i], i);
  }
  //comment out the below line if you want the same colors each time for each link
  setInterval(function(){colorize.mycolors.sort(function(){return 0.5 - Math.random();});}, 3000);
 };
 
 onload = colorize.setup;
})();
</script>

Notice the comments in the code for ways you may change the outcome.

**tpravioti** · 10-29-2009, 10:00 AM

the second idea is possible??

don't use the function Math.random() and each link to take its color from the array with the line(for example: the 1st link takes the 1st color, the 2st link takes the 2st color, etc)

i think its easier(maybe)..what are you thinking??

**jscheuer1** · 10-29-2009, 10:50 AM

If you comment out both of the lines for randomness, that's what will happen:

Code:

(function(){
 //Define array of colors
 colorize.mycolors = ['red', 'blue', 'green', 'yellow', 'black', 'orange', 'purple', 'pink', 'brown'];

 //comment out the below line if you want the same initial colors each time the page loads
 //colorize.mycolors.sort(function(){return 0.5 - Math.random();});
 
 function colorize(e, el, i){
  e = e || window.event;
  el.style.color = e.type === 'mouseover'? colorize.mycolors[i] : '';
 }

 colorize.set = function(anc, i){
  anc.onmouseover = anc.onmouseout = function(e){colorize(e, anc, i);};
 };

 colorize.setup = function(){
  var anc = document.getElementById('menu').getElementsByTagName('a'), i = anc.length - 1;
  for (i ; i > -1; --i){
   colorize.set(anc[i], i);
  }
  //comment out the below line if you want the same colors each time for each link
  //setInterval(function(){colorize.mycolors.sort(function(){return 0.5 - Math.random();});}, 3000);
 };
 
 onload = colorize.setup;
})();

However, at that rate you may as well dispense with javascript altogether and just use css style to set the hover color property for each link separately via id.

I was playing around with this script a bit though, and I decided I liked it best with just the second randomness line commented out. That way you get a different set of colors for each page load, but the colors don't change unless you reload the page.