Solved

Change Table Background on mouse ove

Posted on 2009-04-08
10
377 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
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to i line up css containers from left to right 35 23
PHP email variable syntax 3 53
replace quotes with UTF-8 character 38 108
What does GoogleTagMgr javascripts below do 5 36
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

828 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