|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
November 21st, 2004, 07:43 AM
|
|||
|
|||
|
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...
|
|
#2
November 21st, 2004, 08:25 AM
|
||||
|
||||
|
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.
|
|
#3
November 21st, 2004, 09:22 AM
|
|||
|
|||
|
Thanks Shadow Wizard, that's done the trick.
|
|
#4
November 21st, 2004, 09:27 AM
|
||||
|
||||
|
no problem.... tricks are my speciality.
|
|
#5
November 21st, 2004, 12:15 PM
|
||||
|
||||
|
"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
|
|
#6
November 21st, 2004, 04:42 PM
|
|||
|
|||
|
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.
|
|
#8
November 21st, 2004, 10:50 PM
|
||||
|
||||
|
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.
|
|
#9
November 22nd, 2004, 01:31 AM
|
||||
|
||||
|
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.....
|
|
#11
November 22nd, 2004, 03:08 AM
|
||||
|
||||
|
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
|
||||
|
||||
|
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
|
||||
|
||||
|
I hope they let multiple names at least? without it, using checkbox/radio button groups will become impossible!!
|
|
#14
November 22nd, 2004, 10:46 AM
|
||||
|
||||
|
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
|
|
#15
November 22nd, 2004, 11:20 AM
|
||||
|
||||
|
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?  )
|
|
| Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > DHTML change background color of several links |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
