DHTML change background color of several links

ASP Free Forums Sponsor:

November 21st, 2004, 07:43 AM

danwednesday

Registered User

Join Date: Jun 2004

Posts: 12

Time spent in forums: 8 m 21 sec
Reputation Power: 0

DHTML change background color of several links

Hi,

I have several links on a page whose background color needs to change upon mousing over a certain element on the page. e.g:

Code:

 
<a href="#" id="a_link">A link</a>
<a href="#" id="a_link">A link</a>
<a href="#" id="a_link">A link</a>
 
<a href="#" onmouseover="" onmouseout="">This link should change the background color of all of the "a_link" elements when moused over</a>

I just don't know how to reference the background color property of the links and change them using DOM.

If anyone can help, this would be most appreciated, thanks...

November 21st, 2004, 08:25 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,942

Folding Points: 340699 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 3 Months 1 Week 5 Days 12 h 47 m 26 sec
Reputation Power: 1537

you can define different css class for each type of link (with background color and without), and change the class with js code:

Code:

   <style>
   .link_normal {background-color: none;}
   .link_color {background-color: yellow;}
   </style>
   <script>
     function ChangeClass(controlID, strNewClass)
     {
      var objControl = document.getElementById(controlID);
      if (objControl)
      {
   	  var arrControls = document.getElementsByTagName(objControl.tagName);  
   	  for (var i=0; i<arrControls.length; i++)
   	  {
   		 if (arrControls[i].id == controlID)
   			arrControls[i].className = strNewClass;
   	  }
      }
     }
   </script>
   <a id="link1" class="link_normal">link1</a>
   <a id="link1" class="link_normal">link2</a>
   <a id="link1" class="link_normal">link3</a><br />
 <a onmouseover="ChangeClass('link1', 'link_color');" onmouseout="ChangeClass('link1', 'link_normal');">change links</a>

the above code assume all the controls with that id are of the same html tag type.

Last edited by Shadow Wizard : November 21st, 2004 at 08:28 AM.

November 21st, 2004, 09:22 AM

danwednesday

Registered User

Join Date: Jun 2004

Posts: 12

Time spent in forums: 8 m 21 sec
Reputation Power: 0

Thanks Shadow Wizard, that's done the trick.

November 21st, 2004, 09:27 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,942

Time spent in forums: 3 Months 1 Week 5 Days 12 h 47 m 26 sec
Reputation Power: 1537

no problem.... tricks are my speciality.

November 21st, 2004, 12:15 PM

Phoenix

Web-Standards Evangelist

ASP Free Intermediate (1500 - 1999 posts)

Join Date: Nov 2003

Posts: 1,522

Time spent in forums: 4 Days 23 h 48 m 4 sec
Reputation Power: 8

"tricks" are not recommended if you wish to maintain forward compatibility

IRT #1

An alternative solution to your problem would be to use the "child" CSS selector

...However, I cannot offer any code untill I see the (semantic) markup of your page

However, I would like to nit-pick the error in what code you have given... you've got multiple ID values that are the same

No ID value would be the same, it is meant to be unique

November 21st, 2004, 04:42 PM

danwednesday

Registered User

Join Date: Jun 2004

Posts: 12

Time spent in forums: 8 m 21 sec
Reputation Power: 0

Don't worry, the solution above was just to get me on the right track - the actual problem was slightly different, I just needed to know the principle. I now have a valid 'strict' XHTML page which is as forward compatible as possible, utilising valid CSS2.0.

November 21st, 2004, 04:48 PM

Phoenix

Web-Standards Evangelist

Join Date: Nov 2003

Posts: 1,522

Time spent in forums: 4 Days 23 h 48 m 4 sec
Reputation Power: 8

"strict" XHTML isn't the latest XHTML specification

XHTML1.1 has no "strict" variant, its ditched "slacker" developers... finally!

November 21st, 2004, 10:50 PM

shamrog12

Newton's Apple Wizard

Join Date: Nov 2003

Location: Los Angeles

Posts: 1,661

Time spent in forums: 3 Weeks 2 Days 2 h 39 m 22 sec
Reputation Power: 34

there is a XHTML 1.0 Transitional, 1.0 Strict, and 1.1. 1.1 is "strict" by nature in my book. Very few differences between 1.0 Strict and 1.1

__________________
If you found a post of mine helpful, please click on the on my post to add to my reputation.

November 22nd, 2004, 01:31 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,942

Time spent in forums: 3 Months 1 Week 5 Days 12 h 47 m 26 sec
Reputation Power: 1537

no duplicate id is great... my code would be much shorter: objControl.className=strNewClass
I wrote this code as forward complatible as I could, in js terms - can't see any reason why they would remove getElementById method or className property - so my trick is valid for the time being.....

#10

November 22nd, 2004, 01:35 AM

shamrog12

Newton's Apple Wizard

Join Date: Nov 2003

Location: Los Angeles

Posts: 1,661

Time spent in forums: 3 Weeks 2 Days 2 h 39 m 22 sec
Reputation Power: 34

although you can't have multiple instances of id="link1"

#11

November 22nd, 2004, 03:08 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,942

Time spent in forums: 3 Months 1 Week 5 Days 12 h 47 m 26 sec
Reputation Power: 1537

for the meanwhile it is possible - both IE and Firefox supports multiply instances... but I guess it would be removed sometime soon?

#12

November 22nd, 2004, 09:54 AM

shamrog12

Newton's Apple Wizard

Join Date: Nov 2003

Location: Los Angeles

Posts: 1,661

Time spent in forums: 3 Weeks 2 Days 2 h 39 m 22 sec
Reputation Power: 34

It works but having multiple instances of an id is not standards compliant. I personally like the idea of multiple id tags with the same value but as far as being "correct", it's not quite there. For recurring instances of a style, class will have to be used.

#13

November 22nd, 2004, 10:15 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,942