By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,513 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

Change Link Colour With Javascript

P: 6
I have a little problem. I have a menu with a set of links, one of which has to be a different colour to the others. I know this can be done manually but I'm using a CMS system that doesn't allow this, so I'm trying to change it with Javascript, to no avail. The closest I've come to a solution is this script for Invision Power Board, but I can't customise it.

Expand|Select|Wrap|Line Numbers
  1. <script>//New PM Flasher - By Markup
  2. userLinks=document.getElementById('userlinks');
  3. if(userLinks.innerHTML.match("Inbox"))
  4. {
  5. newMsg=false;
  6. a=userLinks.getElementsByTagName("A");
  7. for(i=0;i<a.length;i++)if(a[i].innerHTML.match(/Inbox\s\([0-9]+\)/)&&a[i].innerHTML.match(/[0-9]+/)>0)newMsg=i;
  8. if(newMsg)
  9. {
  10. inbox=a[newMsg];
  11. inbox.style.fontWeight="Bold";
  12. inbox.style.color="Red";
  13. }
  14. }
  15.  
  16. </script>
  17.  
Any ideas anyone?
Nov 5 '07 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
Post the code for the links.
Nov 5 '07 #2

P: 6
If there are two links, both the same colour and I want one different, for example:

[HTML]
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainmenu">
<tr align="left">
<td>
<a href="index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel">home</a>
</td>
</tr>
<tr align="left">
<td>
<a href="index.php?option=com_content&amp;task=view&a mp;id=12&amp;Itemid=26" class="mainlevel">why train with us?</a>
</td>
</tr>
</table>
[/HTML]

I'm trying to apply a version of the code I posted above to these links, so that, for example, the second link would change colour when the document loads through my javascript.
Nov 5 '07 #3

acoder
Expert Mod 15k+
P: 16,027
How are you determining which link is the one whose colour you're changing?
Nov 5 '07 #4

P: 6
How are you determining which link is the one whose colour you're changing?
That's my problem my friend, the code in my first post is just an example. I was trying to use something similar to the code I posted.

So I have two links for example, one "home" and one "about us" (this is just an example). Both links are white but I need the "about us" link to be red. I need the Javascript to search my page at run time for the "about us" link, and if it finds the link, it'll change the colour. Unfortunately I don't know how to tell the Javascript to find this particular link as it doesn't have it's own ID. This is why I was trying to use the code I showed in my first post.
Nov 6 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Try:
Expand|Select|Wrap|Line Numbers
  1. var links = document.getElementsByTagName("a");
  2. for (i = 0; i < links.length; i++) {
  3.   if (links[i].innerHTML == "about us") links[i].style.color = "red";
  4. }
Nov 6 '07 #6

P: 6
Thanks for your help, I managed to get a solution similar to this.
Nov 7 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Glad to see that you got it working. Post again if you have more questions.
Nov 7 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.