how to do change styles with javascript

[wonker]

Hello I have juste descovered your forum and it seems very interesting !

My problem is actually quite complicated :
This is what I have done already :
I've got a menu on the left and the same menu but with different layout at the top.
So far I have used CSS hover to achieve a change of background and color of
text with le left menu
And also CSS hover ro change color of text of top menu.
And I have used javascript to make a distinct rollover image that changes when you mouse over the left menu different items.

This is what I want to do :
Make the top menu's respective items change color when I point the mouse over the left men's items.
Quite easy except that the CSS hover does no longer work after this so I have had to replace css hover with javascript and I also want the oposit to work, when I point the mouse over an item on the top menu, I want the text, background and icon of left menu to change as if I had passed the mouse over the left menu item...

Each time I add a javascript, the CSS stop's working... should I remove all CSS for this hover or is there another way to do this? because it seems like I need alot of code to get anywhere (3 commands for mouseover and 3 for mouseout per item in top menu ....)

I'm new to javascript, and advice about achieving this with the minimum code would be greatfull !

Also, I'm not sure if it's because I have not uploaded it yet but with firefox only the first javascript command seems to work ...

IE if I use :


<a href="#" onmouseover="distance.src=image2.src;dist1.style.color='#CCC' ... </a>

it works fine with IE but with firefox, the image changes to image2.src but the text colour of dist1 does not change...

Thanks ;)

[alexjewell]

I'd get rid of the javascript for this and just use css. :)

[jscheuer1]

Well, yes - it usually does require more javascript code than the equivalent css style code to achieve something. However, in many situations - especially dynamic effects, there just aren't the available options in css - especially in IE 6 and earlier to do much of what one might like to dynamically.

Sometimes it is best to do things both ways, but if one wants to rely entirely on javascript, there are major differences between IE and FF, as to how elements are 'gotten'.

You really didn't supply enough of your code and markup to see what the exact problem is, but it looks like you are trying to change the color of an element identified by its id or name. Getting an image works using just name in both browsers but, if it is for another sort of element, generally the id is the most efficient means available, and it must be gotten with getElementById rather than as a part of the implied 'all collection' available in IE.

Now about how much code is required, this means even more code is required in javascript. But this really isn't so much of a problem, as a script can be made available to the page and common repetitive functions needed for your effects can be placed there and used by any and all elements that require them.