Possible to change class with onMouse event?

[Zoef]

Whit a mouseover event it's easy to change css properties:

onMouseOver="menu_1.style.background='#7e7ea2';"
onMouseOut="menu_1.style.background='#2f2f3f';"

But what I'd really like to do is to change the class:

onMouseOver="menu_1.something.to.set.class='menu_mousover';"
onMouseOut="menu_1.something.to.set.class='menu_off';"

That way I could control the look of the mouseover event from within a linked stylesheet which just seems like a practical thing to do

Any thoughts?

Greetings

Rik

[podlob]

Use the className property.


CSS

p.black {
	font: normal 12px arial;
	color: #000000;
}
p.red {
	font: normal 12px arial;
	color: #ff0000;
}

HTML/JavaScript

<p id="text" class="black">Some Text</p>
<p><a href="#" onclick="document.getElementById('text').className='red'">change to red class</a></p>

[Zoef]

Mmmmmm never seen that before

I'll try that

thanks!!!!

[MDJ2000]

Try this to change the class onMouseover,

<td class="menu1" onMouseOver="this.className='menu2'" 
onMouseOut="this.className='menu1'">Blah</td>

[Zoef]

Wow! Two for the price of one!!!

Tried both, they work!!

Thanks guys!!!!!

Don't mean to nag but... does this work in all 4+ browsers?

[podlob]

Not Netscape 4. Only in IE4+ NS6+

[Zoef]

Thanks!!!

I guess that will have to do then . It's only a mousover after all.

My gut feeling about 'browsers compatibility' is this:

• There's still a lot of people with a win98 first edition (including ie4) who don't know where the 'windows update' button is.
• Netscape users are a bit mor 'net savy' and know how to download am upgrade.

Are my assumptions correct?

[beetle]

Originally posted by Zoef
Are my assumptions correct?

Acutally, according to thecounter.com's browser stats for November, the follwing facts are evident

• More people use NS4 than IE4
• Of all NS4+ users, 47.5% still use NS4.x
• Of all IE4+ users, 2.2% still use IE4

Not sure, but kinda flys in the face of your assumptions

Now, on a side note, if IE supported CSS2 as well as Gecko-based browsers, you wouldn't need javascript for this rollover at all, just the :hover pseudo-class.

p.rollover {
	font: normal 12px arial;
	color: #000000;
	}
p.rollover:hover {
	color: #ff0000;
	}

<p class="rollover">This paragraph will change to red when you mouse-over it, but only if your browser has full support for CSS2!!</p>

[MDJ2000]

I stopped designing for NS 4.x ages ago. I design for w3 compliance. Why anyone would still use NS 4.x as opposed to Mozilla is beyond me...actually why anyone would use anything other than Mozilla is beyond me, but I'm not going to get into a browser war here

[beetle]

Hehe, like the sig (Doh!)

[Zoef]

Thanks guys!

So my assumptions are proven wrong... I just can't log on to Sitepoint without learning something!

I had already tried to use the hover subclass, something like this:

td.menu_item_off:hover {
    color: #ffffff;
    text-decoration: none;
    background: #999999; }

But it would only change the color of the 'box' around the text, not the background color of the table cell which was ugly. (ie5 btw)

The reason why anybody uses this or that browser is beyond me as well. Anyhow, 'why' questions give me a headache . The reason I'm using ie5 right now is that I recently formatted my harddisk, reinstalled everything and haven't bothered to install/upgrade to another one yet.

But fact is people do use different browsers and I would like it if all of those people would more or less see what I meant them to see... that's all folks !!!!

Thanks again guys, and see you around...