Solved

Change Table Background on mouse ove

Posted on 2009-04-08
10
374 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
Comment Utility
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 6

Expert Comment

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

Assisted Solution

by:DVation191
DVation191 earned 50 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

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

Author Comment

by:gisvpn
Comment Utility
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
Comment Utility
can anyone help with the above script :) ?
0
 
LVL 2

Accepted Solution

by:
jrtwig earned 450 total points
Comment Utility
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
Comment Utility
Hello jrtwig,

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

Regards,

GISVPN
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Menu Trouble 8 30
Programatically edit Web.config 8 28
CGI takes almost 2 minutes to load using thttpd 20 40
query of query sort 6 88
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

743 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

11 Experts available now in Live!

Get 1:1 Help Now