[web] Mouseover Javascript
Author
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?
Something like this should do.
Or you could change backgroundImage
<td onmouseover="javascript:style.backgroundColor=#0fa0ff">Or you could change backgroundImage
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'">
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
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
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
Quote:Original post by Anonymous PosterQuote: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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
