Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Change Table Background on mouse ove

Posted on 2009-04-08
10
Medium Priority
?
388 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 200 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
Independent Software Vendors: 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!

 

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 1800 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

578 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