Preserved Topic: Changing CSS tag via JavaScript (Page 1 of 1)

How can I change the CSS class of a link onMouseOver and onMouseDown in a link?


i.e.
<a href="#" onMouseOver="mouseOverStyle" onMouseDown="mouseDownStyle">Home</a>

I need this to call the different styles in a style sheet. Hope this is clear.

Thanks,
C:\

I'm not sure why you'd want to do that for a link when :hover will do but use something like:

<p onmouseover="this.className='pOver'" onmouseout="this.className='pOut'">Content</p>

Its not very cross browser but usually the JavaScript that extends this to 4.x browsers gets a little complicated (I'm saying this because I'm a big fan of this.className so I'm biased).

Emps

Thanks once again Emperor. The reason I am doing this is because I am making a "ToolBar" type interface. When the mouse is over the link, it looks like "CoolButtons". When the mouse is down it will look as if the button is being pressed.

Just messing around with CSS and am not that adept in JavaScript.

Thanks,
C:\

CPrompt: I was playing around with doing it this way but I went for the WebFX code which would make it work in more browsers - I may return to the way you suggest as I keep breaking CoolButtons when I redo the page. The power of this.className is that it can provide interesting effects if you don't want to get into a full JavaScript solution but it can get a little weighty in code when you try to do something complex but as I say I'm a big fan and prefer this solution to many others.

Emps

Don't forget that "this.className" piece of code from above works only in IE & Mozilla/NN6...

mr.maX - thanks for picking up that point - its an important point that I was, sort of, alluding to by stressing the need for more complex JavaScript to make it more cross-browser. This is esp. important with something like link buttons as it could prove difficult for other browser users to understand the navigation.

Emps

Yeah, I know that this is just for IE and NS6 unfortunatley. The other bad thing is that I am redoing my personal site and it is all CSS, some of which is CSS2. This is a big problem I know but there again it is just a personal site and I beleive that everyone that will be viewing it uses IE. It is just hard to make a page that I like while being cross browser, esp. since it is just a personal site for family and friends to check out and a way for me to develop some sort of web skills. Down the road I am sure that I will change it again to something a little more browser friendly.

Thanks for the help.
C:\