change link colors with javascript...

[orion pax]

Ok....I want to dynamically change the background colors of links each time the mouse rollsover the links. Individually. Is there any other way than this?

document.getElementById(id).style.backgroundColor=color

and calling the function with the id as a variable.

[vchris]

You could use getElementByTagName("a") instead.

[jesh]

Yep:

<script type="text/javascript">function hover(obj){    if(obj.className == "off")    {        obj.className = "on";    }    else    {        obj.className = "off";    }}</script><style type="text/css">.off { color : black; }.on { color: red; }</style><a class="off" href="http://www.w3schools.com/" onmouseover="hover(this);" onmouseout="hover(this);">W3Schools</a>

Or, more simply:

<style type="text/css">a { color: black; }a:hover { color: red; }</style><a href="http://www.w3schools.com/">W3Schools</a>

[orion pax]

You could use getElementByTagName("a") instead.

This idea I like. But its not working. I just replaced getElementById(id) with that and no go. Could the fact that all the html in the site is pretty much php generated have anything to do with the fact that its not working?

Yep:

<script type="text/javascript">function hover(obj){    if(obj.className == "off")    {        obj.className = "on";    }    else    {        obj.className = "off";    }}</script><style type="text/css">.off { color : black; }.on { color: red; }</style><a class="off" href="http://www.w3schools.com/" onmouseover="hover(this);" onmouseout="hover(this);">W3Schools</a>

Or, more simply:

<style type="text/css">a { color: black; }a:hover { color: red; }</style><a href="http://www.w3schools.com/">W3Schools</a>

This wouldnt do for the fact that I want A LOT of colors in it. I allready have an array setup with about 215 hex codes for different colors. That was fun. Need less to say a pain in my @$$.

[orion pax]

I get this error in firefox's error consoleError: document.getElementsByTagName("a").style has no propertiesSource File: http://test.stormannormandproductions.com/.../colorchange.jsLine: 223and according to the javascript tuts here you misspelled it by 1 letter....missing a "S" in there.

[aspnetguy]

document.getElementsByTagName("a") is an array, you must specify an index likedocument.getElementsByTagName("a")[0].style.etc,etc

[jesh]

This wouldnt do for the fact that I want A LOT of colors in it. I allready have an array setup with about 215 hex codes for different colors. That was fun. Need less to say a pain in my @$$.

What do you mean when you say you want a lot of colors in it? You have an array of colors, are you wanting to have each link use a different color? Or do you want a different color to appear each time the link is moused-over?

[MrAdam]

for each link a different random colour:

function changecolor(id) { var links = new Array(); links = document.getElementsByTagName("a"); for (i=0;i<backgroundcolors.length;i++) {  var number = (Math.floor(Math.random()*215));  links[i].style.backgroundColor=backgroundcolors[number]; }}

for each link the same random colour:

function changecolor(id) { var links = new Array(); links = document.getElementsByTagName("a"); var number = (Math.floor(Math.random()*215)); for (i=0;i<backgroundcolors.length;i++) {  links[i].style.backgroundColor=backgroundcolors[number]; }}

i've not tested them, but they should work !

[orion pax]

Hey thanks. I like the effect of that first script. But I was looking more for individuality rather than changing EVERY single one at the same time. The only way I can see doing it individually is with ID's. Well I will give that script a try and see how my friend likes it.OH yeah...that script changes EVERY SINGLE link on the page. I am looking for just changing the links in the user/main menu's on the left of the screen. Thanks for the help.

[PrateekSaxena]

I think that the one suggested by you in the first post is the best method. I would not use any other method other than that. the first method is simply perfect!!!!