Highlight a Cell (or text) when hovering on another Cell

marz · January 22, 2012

I need a smart tip to highlight a Cell in table B when the mouse is hovered over a link (or cell) in table A or perhaps different cells within the same table. The need might come that both cells should be highlighted, that is the 'hoover-upon' cell/link and the unhoovered cell in the other table.

The application use a pair of tables (with interelated cells) and when one hovering a cell, I want that the corresponding cell in the other table is also (or alone) highlighted without the mouse being on it

More or less I know the onmouseover / on Mouseout technique on the hoovered cell, but how to apply it to a different cell that is not hoovered upon!?!?

Mega thanks in advance for your help

SergeiSS · January 22, 2012

It's not PHP, it's JS only.

You have to create onmouseover event for every cell in the first table. In that events you have to call one special function (you create it) and pass to that function a parameter, showing the cell to be highlighted. And also you need a function that set it back.

HTML code:
... onmouseover="highlight_cell( 'cell_101' )" onmouseout="unhighlight_cell( 'cell_101')" ....

JS code:
function highlight_cell( cell )
{
  document.getElementById( cell ).style=special_cell_style;
}

function unhighlight_cell( cell )
{
  document.getElementById( cell ).style=initial_cell_style;
}

AyKay47 · January 22, 2012

or, if you are using jquery, it would look something like this.

$(function() {
   $("cell_class").hover(
   function() { $("other_cell").css("background-color","any_color"); }, //mouseenter
   function() { $("other_cell").css("background-color","original_color"); } //mouseleave
   );
});

marz · January 22, 2012

Thanks, I will experiment with the code and try (becasue I am no JS coder) to adapt it.

In the menatime, a further tip will help me alot:

If I want to highlight Cell A and Cell B (and Cell C, D, E ... if I am understanding) I have to include the

[ onmouseover="highlight_cell( 'cell_101' )" onmouseout="unhighlight_cell( 'cell_101')" ] thing in Cell A +B and whether the mouse is on Cell A or CEll B, both will highlight - hope that answer is a yes!

Then I need to set the 'special_cell_style' and 'initial_cell_style' in my css file right?

SergeiSS · January 22, 2012

You have to include onmouseover/onmouseout events to the cell where you move you mouse. Inside these events you may do whatever you wish. In my example just one function is called from every event. Inside that functions you may do any actions: change styles of any element, disable/enable every element, add more elements, change elements' positions... It's up to you what to do, according the design that you like.

marz · January 22, 2012

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style>

div.special_cell_style {

background-color:#0F6;

;}

div.initials_cell_style {

background-color:#FFF

;}

</style>

<script>

function highlight_cell( cell )

{ document.getElementById( cell ).style=special_cell_style;}

function unhighlight_cell( cell )

{ document.getElementById( cell ).style=initial_cell_style;}

</script>

</head>

<body>

<table border="1">

<tr>

<td onmouseover="highlight_cell( 'cell_101' )" onmouseout="unhighlight_cell( 'cell_101')"> A1 </td>

<td onmouseover="highlight_cell( 'cell_102' )" onmouseout="unhighlight_cell( 'cell_102')"> A2 </td>

<td onmouseover="highlight_cell( 'cell_103' )" onmouseout="unhighlight_cell( 'cell_103')"> A3 </td>

</tr>

<tr>

<td onmouseover="highlight_cell( 'cell_101' )" onmouseout="unhighlight_cell( 'cell_101')"> B1 </td>

<td onmouseover="highlight_cell( 'cell_102' )" onmouseout="unhighlight_cell( 'cell_102')"> B2 </td>

<td onmouseover="highlight_cell( 'cell_103' )" onmouseout="unhighlight_cell( 'cell_103')"> B3 </td>

</tr>

</table>

</body>

</html>

Obviously, I did not learnt how to use your suggested code. In the simple table example above, I want that when the mouse is on A1 or B1, both cells A1 and B1 becomes highlihted. Same for A2-B2 and A3-B3.

I do not have any JS skills and did not understood the code (esp cell_101). Would be grateful to you if you can re-edit teh code to learn the technique.

Thanks a lot Sergie - we love Russia (not only for the girls!)

AyKay47 · January 22, 2012

The functions parameter needs to be the desired cell's id. You will need to assign each cell a unique id for js to create an object.

marz · January 22, 2012

Please can you copy/paste part of the code and edit it to examplify your words as did not really undertsand (as I said I do not kow the Java language).

Many thanks!

AyKay47 · January 23, 2012

Please can you copy/paste part of the code and edit it to examplify your words as did not really undertsand (as I said I do not kow the Java language).

Many thanks!

Java != javascript

<td onmouseover="highlight_cell( 'cell_id' )" onmouseout="unhighlight_cell( 'cell_id')" id='cell_id'> B1 </td>

SergeiSS · January 23, 2012

Let me add one thing. In the beginning it was sad "I need a smart tip to highlight a Cell in table B when the mouse is hovered over a link (or cell) in table A".

That's why this code

<td onmouseover="highlight_cell( 'cell_id' )" onmouseout="unhighlight_cell( 'cell_id')" id='cell_id'> B1 </td>

might be changed.

This id 'cell_id' must be set for another cell, in another table!!!

Cell in table A:

<td onmouseover="highlight_cell( 'cell_id' )" onmouseout="unhighlight_cell( 'cell_id')"> A-cell </td>

Cell in table B:

<td id='cell_id'> B1 </td>

I told about it in the very beginning "In that events you have to call one special function (you create it) and pass to that function a parameter, showing the cell to be highlighted." - according to the first task. But it seems that TC didn't understand it.

marz · January 23, 2012

Yes, the purpose was actually Cell A1,A2, A3 in Table A and Cell B1,B2,B3 in table B. To avoid confusion, I have edited the code to stick with that example. - It did not work :'( :shrug: = it does not even highlght any Cell. What's wrong? is it the style?

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style>

td.special_cell_style {

background-color:#0F6;

}

td.initial_cell_style {

background-color:#FF0;

}

</style>

<script>

function highlight_cell( cell )

{ document.getElementById( cell ).style=special_cell_style;}

function unhighlight_cell( cell )

{ document.getElementById( cell ).style=initial_cell_style;}

</script>

</head>

<body>

<table border="1" >

<tr>

<td onmouseover="highlight_cell('1')" onmouseout="unhighlight_cell('1')" id='1' > A1 </td>

<td onmouseover="highlight_cell('2')" onmouseout="unhighlight_cell('2')" id='2' > A2 </td>

<td onmouseover="highlight_cell('3')" onmouseout="unhighlight_cell('3')" id='3' > A3 </td>

</tr>

</table>

<br />

<table border="1" >

<tr>

<td id='1' > B1 </td>

<td id='2' > B2 </td>

<td id='3' > B3 </td>

</tr>

</table>

</body>

</html>

SergeiSS · January 23, 2012

Sorry, I misinform you a little Here it might be 'className=', not 'style='.

Also pay attention: I changed ids!!! Because you did it incorrectly.

Correct code is

<style>
.special_cell_style {
   background-color:#0F6;
   }
   
.initial_cell_style {
   background-color:#FF0;
   }
</style>


<script>

function highlight_cell( cell )
{  document.getElementById( cell ).className='special_cell_style';}

function unhighlight_cell( cell )
{  document.getElementById( cell ).className='initial_cell_style';}

</script>
</head>

<body>
<table border="1" >
   <tr>
      <td onmouseover="highlight_cell('b1')" onmouseout="unhighlight_cell('b1')" id='a1' > A1 </td> 
      <td onmouseover="highlight_cell('b2')" onmouseout="unhighlight_cell('b2')" id='a2' > A2 </td>
      <td onmouseover="highlight_cell('b3')" onmouseout="unhighlight_cell('b3')" id='a3' > A3 </td>
   </tr>
</table>
<br />

<table border="1"  >
<tr>
<td class="initial_cell_style" id='b1' > B1 </td>
<td class="initial_cell_style" id='b2' > B2 </td>
<td class="initial_cell_style" id='b3' > B3 </td>
</tr>
</table>

PS. You don't need 'td' in the names of styles.

marz · January 23, 2012

Unfortunately it did not work as expected - I am stuck with 3 yellow cells in A1, A2, A3 (initial_cell_style). B1,B2,B3 do change on hoovering on A1-A3.

I try to tweak some things here ...

PS: when I used classname instead className, it did not work - is Javescript case sensitive!!

AyKay47 · January 23, 2012

Unfortunately it did not work as expected - I am stuck with 3 yellow cells in A1, A2, A3 (initial_cell_style). B1,B2,B3 do change on hoovering on A1-A3.

I try to tweak some things here ...

PS: when I used classname instead className, it did not work - is Javescript case sensitive!!

yes

marz · January 23, 2012

I have managed to get the result:

<tr>

</tr>

</table>

<br />

<tr>

</tr>

</table>

====================================

Is there a short cut to avoid long <td... lines?

I was experimenting withouth sucess on this method :

function highlight_cell( cellA,cellB )

{ document.getElementById( cellA ).className='special_cell_style';

document.getElementById( cellB ).className='special_cell_style';}

SergeiSS · January 23, 2012

Is there a short cut to avoid long <td... lines?

Yes

1. You may use shorter function names and ids.

2. In addition to p.1 you may save the cells' names when call highlight_cell() function and then you may call unhighliht_cell() without parameters.

3. Change style of A cells via CSS.

4. You may put these events into <tr> tag. Then you have to detect which element call this event...

5... Maybe more possibilities are possible.

In your case 1-st (or second) possibility is IMHO prefered because they are more simple.

I was experimenting without success on this method :

function highlight_cell( cellA,cellB )

{ document.getElementById( cellA ).className='special_cell_style';

document.getElementById( cellB ).className='special_cell_style';}

Why wasn't it success? How did you call this function? Show your code. I tried - it works in my hands

Sign In

Highlight a Cell (or text) when hovering on another Cell

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information