• 13
• 18
• 19
• 27
• 10

[web] Mouseover Javascript

This topic is 4649 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I know this is a real basic question, but... I was wondering how you change out the background of a table cell in javascript, when you mouseover it?

Share on other sites
Something like this should do.

<td onmouseover="javascript:style.backgroundColor=#0fa0ff">

Or you could change backgroundImage

Share on other sites
Quote:
 Original post by BoderSomething like this should do.
Or you could change backgroundImage

You'll probably have to quote the color, and use the "this" keyword:

<td onmouseover="this.style.backgroundColor='#0fa0ff'">

Share on other sites
Ahh, thanks a million guys [smile]

Share on other sites
Or you could use css and a :hover pseudo-class. This requires no scripting and is generally much more straightforward.

Although normally, it's used for links not table cells. I don't know why you would want to change a table cell.

I don't know whether you can use :hover arbritarily in IE - this may be a problem.

Certainly you don't want to bloat your html with onmouseover events on every single element in the page - an alternative solution must exist.

Mark

Share on other sites
Quote:
 Original post by markrI don't know whether you can use :hover arbritarily in IE - this may be a problem.

hover will only work on a elements, you could put an a inside each cell

Share on other sites
It will work on anything in firefox.
-Greg

Share on other sites
Quote:
Original post by Anonymous Poster
Quote:
 Original post by markrI don't know whether you can use :hover arbritarily in IE - this may be a problem.

hover will only work on a elements, you could put an a inside each cell

You can have the link as an all-transparent image with the properties "height:100%; width:100%; display:block;" (the image, not the a tag)which would cover the entire area.

That way, you can have two styles:

.nav a {
background-color:#FFFFFF;
}

.nav a:hover {
background-color:#CCCCCC;
}

Anyway, I know this wasn't a constructive post. Just thought I'd share.