Sign in to follow this  

[web] Mouseover Javascript

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

If you intended to correct an error in the post then please contact us.

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 this post


Link to post
Share on other sites
Something like this should do.

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


Or you could change backgroundImage

Share this post


Link to post
Share on other sites
Quote:
Original post by Boder
Something like this should do.

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


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 this post


Link to post
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 this post


Link to post
Share on other sites
Guest Anonymous Poster
Quote:
Original post by markr
I 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 this post


Link to post
Share on other sites
Quote:
Original post by Anonymous Poster
Quote:
Original post by markr
I 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.

Share this post


Link to post
Share on other sites

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

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this