Closed Thread Icon

Preserved Topic: Changing CSS tag via JavaScript Pages that link to <a href="https://ozoneasylum.com/backlink?for=18160" title="Pages that link to Preserved Topic: Changing CSS tag via JavaScript" rel="nofollow" >Preserved Topic: Changing CSS tag via JavaScript\

 
Author Thread
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 09-10-2001 20:42

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:\

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 09-10-2001 20:47

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

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 09-10-2001 21:40

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:\

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 09-10-2001 21:51

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

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted posted 09-10-2001 22:21

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

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 09-10-2001 22:32

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

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 09-11-2001 03:27

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:\

« BackwardsOnwards »

Show Forum Drop Down Menu