Solved

Change Table Background on mouse ove

Posted on 2009-04-08
10
380 Views
Last Modified: 2012-05-06
hello,

I have a table with 5 cells in it. How can I change the background (ideally via CSS) when the mouse hovers over the cell of the table ? I would also like the background to stay the same until the mouse moves over another one of the 5 cells.

Thanks,

GISVPN
0
Comment
Question by:gisvpn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 2

Expert Comment

by:jrtwig
ID: 24100348
You can do this with the onmouseover tag and CSS.

<style type="text/css">
td.regular { background-color: #000000;  }
td.onmouse { background-color: #FFFFFF; }
</style>

<td class="regular" onmouseover="className='onmouse';" onmouseout="className='regular';">
</td>
0
 
LVL 7

Expert Comment

by:Thomas Wheeler
ID: 24100350
I would use JS onmouseover and onmouseout to change the cells ID
0
 
LVL 20

Assisted Solution

by:DVation191
DVation191 earned 50 total points
ID: 24100364
Try something like this:

<td onmouseover="style.backgroundColor='#CCC';" onmouseout="style.backgroundColor='#999'">cell content</td>

Open in new window

0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:gisvpn
ID: 24100419
Hi,

thanks for the posts, the code below work perfectly for what I am looking for, however the complication comes when I would like to keep the .onmouse case until another of the four cells has the mouse in it, not  onmouseout...

:)

Thanks,

GISVPN
<style type="text/css">
td.regular { background-color: #000000;  }
td.onmouse { background-color: #FFFFFF; }
</style>

Open in new window

0
 
LVL 2

Expert Comment

by:jrtwig
ID: 24100689
Using the above style sheet add a javascript function to reset all <td> tags with a class name of "onmouse" back to "regular" and then set the selected cells class to "onmouse".  The below code may need some tweaking, I have not tested it.  This also requires you to add an unique id to each cell.
<script>
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}; 
 
function tdBgColor(thisID)
{
  var arr = new Array();
  arr = document.getElementsByClassName('onmouse');
 
for(var i=0; i < arr.length; i++)
{
  arr[i].style.className="regular";
}
 
document.getElementById(thisID).style.className="onmouse";
};
 
</script>
 
<td class="regular" id = cell1 onmouseover='javascript:tdBgColor(this.id);'>

Open in new window

0
 

Author Comment

by:gisvpn
ID: 24100782
Thanks for the code, it does not seem to do anything when the mouse rolls over it ? :)
0
 

Author Comment

by:gisvpn
ID: 24100825
Im using the below script to test with, it does not seem to change the background as expected...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script>
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}; 
 
function tdBgColor(thisID)
{
  var arr = new Array();
  arr = document.getElementsByClassName('onmouse');
 
for(var i=0; i < arr.length; i++)
{
  arr[i].style.className="regular";
}
 
document.getElementById(thisID).style.className="onmouse";
};
 
</script>
 
<style type="text/css">
td.regular { background-color: #000000;  }
td.onmouse { background-color: #FFFFFF; }
</style>
 
 <table>
 <tr>
<td class="regular" id=cell1 onmouseover='javascript:tdBgColor(this.id);'>fgdfg</td>
<td class="regular" id=cell2 onmouseover='javascript:tdBgColor(this.id);'>fdgdfg</td>
<td class="regular" id=cell3 onmouseover='javascript:tdBgColor(this.id);'>dffgdfg</td>
<td class="regular" id=cell4 onmouseover='javascript:tdBgColor(this.id);'>dffgdfgdfg</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:gisvpn
ID: 24106598
can anyone help with the above script :) ?
0
 
LVL 2

Accepted Solution

by:
jrtwig earned 450 total points
ID: 24107289
I'm sorry, I was away from the computer for a while.  The code will work if you remove the .style before the .className in the javascript.  I altered your test code and tried it with IE and Firefox.  The altered test code is below.  
<html>
<head>
<title>Untitled</title>
</head>
 
<script>
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}; 
 
function tdBgColor(thisID)
{
  var arr = new Array();
  arr = document.getElementsByClassName('onmouse');
 
for(var i=0; i < arr.length; i++)
{
  arr[i].className="regular";
}
 
document.getElementById(thisID).className="onmouse";
};
 
</script>
 
<style type="text/css">
td.regular { background-color: #000000;  }
td.onmouse { background-color: #FFFFFF; }
</style>
 <body>
 <table>
 <tr>
<td class="regular" id=cell1 onmouseover='javascript:tdBgColor(this.id);'>fgdfg</td>
<td class="regular" id=cell2 onmouseover='javascript:tdBgColor(this.id);'>fdgdfg</td>
<td class="regular" id=cell3 onmouseover='javascript:tdBgColor(this.id);'>dffgdfg</td>
<td class="regular" id=cell4 onmouseover='javascript:tdBgColor(this.id);'>dffgdfgdfg</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:gisvpn
ID: 24107431
Hello jrtwig,

Thank for the reply post, really appreciate the help !.. Works great.

Regards,

GISVPN
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question