HTML, JavaScript And CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
Go Back   ASP Free ForumsProgrammingHTML, JavaScript And CSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old November 21st, 2004, 07:43 AM
danwednesday danwednesday is offline
Registered User
ASP Free Newbie (0 - 499 posts)
 
Join Date: Jun 2004
Posts: 12 danwednesday User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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...

Reply With Quote
  #2  
Old November 21st, 2004, 08:25 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
ASP Free God 47th Plane (28000 - 28499 posts)
 
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
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.

Reply With Quote
  #3  
Old November 21st, 2004, 09:22 AM
danwednesday danwednesday is offline
Registered User
ASP Free Newbie (0 - 499 posts)
 
Join Date: Jun 2004
Posts: 12 danwednesday User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 m 21 sec
Reputation Power: 0
Thanks Shadow Wizard, that's done the trick.

Reply With Quote
  #4  
Old November 21st, 2004, 09:27 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
ASP Free God 47th Plane (28000 - 28499 posts)
 
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
no problem.... tricks are my speciality.

Reply With Quote
  #5  
Old November 21st, 2004, 12:15 PM
Phoenix's Avatar
Phoenix Phoenix is offline
Web-Standards Evangelist
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Posts: 1,522 Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 49 m 54 sec
Reputation Power: 9
"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

Reply With Quote
  #6  
Old November 21st, 2004, 04:42 PM
danwednesday danwednesday is offline
Registered User
ASP Free Newbie (0 - 499 posts)
 
Join Date: Jun 2004
Posts: 12 danwednesday User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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.

Reply With Quote
  #7  
Old November 21st, 2004, 04:48 PM
Phoenix's Avatar
Phoenix Phoenix is offline
Web-Standards Evangelist
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Posts: 1,522 Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 49 m 54 sec
Reputation Power: 9
"strict" XHTML isn't the latest XHTML specification

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

Reply With Quote
  #8  
Old November 21st, 2004, 10:50 PM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,662 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 43 m 24 sec
Reputation Power: 54
Send a message via AIM to shamrog12
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.


Reply With Quote
  #9  
Old November 22nd, 2004, 01:31 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
ASP Free God 47th Plane (28000 - 28499 posts)
 
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
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.....

Reply With Quote
  #10  
Old November 22nd, 2004, 01:35 AM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,662 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 43 m 24 sec
Reputation Power: 54
Send a message via AIM to shamrog12
although you can't have multiple instances of id="link1"

Reply With Quote
  #11  
Old November 22nd, 2004, 03:08 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
ASP Free God 47th Plane (28000 - 28499 posts)
 
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
for the meanwhile it is possible - both IE and Firefox supports multiply instances... but I guess it would be removed sometime soon?

Reply With Quote
  #12  
Old November 22nd, 2004, 09:54 AM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,662 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 43 m 24 sec
Reputation Power: 54
Send a message via AIM to shamrog12
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.

Reply With Quote
  #13  
Old November 22nd, 2004, 10:15 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
ASP Free God 47th Plane (28000 - 28499 posts)
 
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
I hope they let multiple names at least? without it, using checkbox/radio button groups will become impossible!!

Reply With Quote
  #14  
Old November 22nd, 2004, 10:46 AM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,662 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 43 m 24 sec
Reputation Power: 54
Send a message via AIM to shamrog12
if you mean the name attribute, no, the name has been deprecated. You'd use id which perfect for Javascript. Before you start to worry, I have an entire company website in XHTML 1.1 with plenty of Javascript. It works and so will yours

Reply With Quote
  #15  
Old November 22nd, 2004, 11:20 AM
Phoenix's Avatar
Phoenix Phoenix is offline
Web-Standards Evangelist
ASP Free Intermediate (1500 - 1999 posts)
 
Join Date: Nov 2003
Posts: 1,522 Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 49 m 54 sec
Reputation Power: 9
Personally, I use CSS2 for everything, rather than JavaScript... even IE-unsupported selectors

Then I just import the ever-useful IE7 script... sososososo useful! ^^

Solves practically every cross-browser problem I have with IE5.5/6... and if anyone complains of poor site performance, I blame it on the fact they're using a (lets face it) crap user agent and rendering engine ("Trident" aka "MSHTML")

The ">" selector is too useful for IE to ignore with the real IE7... what a shame we'll have to wait another 2 years for it :/ (any bets on how much ground Firefox takes in said timespan? )

Reply With Quote
Reply

Viewing: ASP Free ForumsProgrammingHTML, JavaScript And CSS Help > DHTML change background color of several links


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump



 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.

 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.

 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.

 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.

 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.

 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2009 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway
Stay green...Green IT