Jump to content
  • Advertisement
Sign in to follow this  
kbiro

[web] Mouseover Javascript

This topic is 4767 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
Advertisement
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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!