Solved

Change Table Background on mouse ove

Posted on 2009-04-08
10
375 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

948 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now