• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 391
  • Last Modified:

Change Table Background on mouse ove

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
gisvpn
Asked:
gisvpn
2 Solutions
 
jrtwigCommented:
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
 
Thomas WheelerCommented:
I would use JS onmouseover and onmouseout to change the cells ID
0
 
DVation191Commented:
Try something like this:

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

Open in new window

0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
gisvpnAuthor Commented:
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
 
jrtwigCommented:
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
 
gisvpnAuthor Commented:
Thanks for the code, it does not seem to do anything when the mouse rolls over it ? :)
0
 
gisvpnAuthor Commented:
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
 
gisvpnAuthor Commented:
can anyone help with the above script :) ?
0
 
jrtwigCommented:
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
 
gisvpnAuthor Commented:
Hello jrtwig,

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

Regards,

GISVPN
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now