Sign in to follow this  
kbiro

[web] Mouseover Javascript

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

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