Jump to content

change link colors with javascript...


orion pax
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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 @$$.
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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!!!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...