Be shown and hidden with a mouse

<script type='text/javascript'>
window.onload = function()
{
  displayToggle('trg1', 'tgt1');
}
function displayToggle(triggerId, targetId)
{
  var t = document.getElementById(triggerId);
  t.onmouseover = function() {
    document.getElementById(targetId).style.display = 'block';
  };
  t.onmouseout = function() {
    document.getElementById(targetId).style.display = 'none';
  };
}
</script>


<style>
table, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
table.main td { position: relative; } table.main table { position: absolute; z-index: 10; color: red; font-weight: bold; }
</style>

<table class="main">
<tr>
  <td id='trg1' style="width:100px;background-color:pink">

<table id='tgt1' style='width:100px;background-color:yellow;display:none'>
   <tr>
  <td bgcolor='yellow'>top1</td>
   </tr>
</table>
bottom1
  </td>
</tr>
</table>

The code above shows the text “bottom1” in the pink background color.

If you put your mouse on to the text “bottom1”, the text will be changed to another text “top1” in yellow backgound color.

I can make just one table which can be shown and hidden with he code above.

How can I make it more than 2 times to be shown and hidden each by mouse on ?

you’re welcome :slight_smile:

you can ask now if you like :slight_smile:

but I’m also working on something else atm so it might be a couple of hours before I will be able to reply, but in the mean time someone else might be able to help.

these forums are not a 1 to 1 conversation behind closed doors. anyone can view them or try to help.

not sure what you mean by more than 2 times but I think you mean having more than 2 cells with the text toggling.

perhaps something like this

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">

            td {
                background-color: pink;
                color: black
            }
 
        </style>
        <script type='text/javascript'>

            window.onload = function() {
                var tdO = document.getElementById('main').getElementsByTagName('td');
                //assign the onmouseover event handler
                for(var i=0; i < tdO.length; i++) {
                       tdO[i].onmouseover=function() {
                        this.style.backgroundColor = 'yellow';
                        this.style.color = 'red';
                        this.innerHTML = (this.innerHTML == 'bottom')? 'top' : 'bottom';
                    }
                }

                //assign the onmouseout event handler
                for(var i=0; i < tdO.length; i++) {
                        tdO[i].onmouseout=function() {
                        this.style.backgroundColor = '';
                        this.style.color = '';
                        this.innerHTML = (this.innerHTML == 'bottom')? 'top' : 'bottom';
                    }
                }
            }
 
        </script>
    </head>
    <body>

        <table id="main" cellspacing="5">
            <tr>
                <td>bottom</td>
            </tr>
            <tr>
                <td>bottom</td>
            </tr>
            <tr>
                <td>bottom</td>
            </tr>
            <tr>
                <td>bottom</td>
            </tr>
        </table>

    </body>
</html>

Your code works fine.
But I can’t change the contents of each cell.

An example code for my target would be like the following.


        <table id="main" cellspacing="5">
            <tr>
                <td>bottom1</td>
            </tr>
            <tr>
                <td>my bottom2</td>
            </tr>
            <tr>
                <td>bottom text 3</td>
            </tr>
            <tr>
                <td>bottom contents4</td>
            </tr>
        </table>

        <table id="main" cellspacing="5">
            <tr>
                <td>top1</td>
            </tr>
            <tr>
                <td>my top2</td>
            </tr>
            <tr>
                <td>top text 3</td>
            </tr>
            <tr>
                <td>top contents4</td>
            </tr>
        </table>



My target result works like the following.

When a user puts his/her mouse on the text "bottom1", 
the text will be changed to "top1" 


When a user puts his/her mouse on the text "my bottom2", 
the text will be changed to "my top2" 


When a user puts his/her mouse on the text "bottom text3", 
the text will be changed to "top text 3".


When a user puts his/her mouse on the text "bottom contents4", 
the text will be changed to "top contents4".

this demo changes the text in each cell, but you would need to give more details on the exact criteria you want to use to changr the text.

eg…if bottom appeared more than once in a cell, do you want just the first, last or all occurrences of bottom to be changed to top.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black
            }
        </style>
        <script type='text/javascript'>
            window.onload = function() {
                var tdO = document.getElementById('main').getElementsByTagName('td');
                //assign the properties to the td's'
                for(var i=0; i < tdO.length; i++) {
                    tdO[i].num = i+1;
                    tdO[i].text = 'bottom';
                    tdO[i].innerHTML = tdO[i].text + ' '+tdO[i].num;
                    //assign the onmouseover event handler
                    tdO[i].onmouseover=function() {
                        this.style.backgroundColor = 'yellow';
                        this.style.color = 'red';
                        this.text = (this.text == 'bottom')? 'top' : 'bottom';
                        this.innerHTML = this.text + ' '+this.num;
                    }
                    //assign the onmouseout event handler
                    tdO[i].onmouseout=function() {
                        this.style.backgroundColor = '';
                        this.style.color = '';
                        this.text = (this.text == 'bottom')? 'top' : 'bottom';
                        this.innerHTML = this.text + ' '+this.num;
                    }
                }            
            }
        </script>
    </head>
    <body>
        <table id="main" cellspacing="5">
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>

If you mean that putting a mouse of one of 4 bottoms changes all cells to be shown 4 tops, I would say “No”.

I want that putting a mouse on one of 4 bottoms changes the cell to be shown top.

your code below works fine as I expected except a problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black
            }
        </style>
        <script type='text/javascript'>
            window.onload = function() {
                var tdO = document.getElementById('main').getElementsByTagName('td');
                //assign the properties to the td's'
                for(var i=0; i < tdO.length; i++) {
                    tdO[i].num = i+1;
                    tdO[i].text = 'bottom';
                    tdO[i].innerHTML = tdO[i].text + ' '+tdO[i].num;
                    //assign the onmouseover event handler
                    tdO[i].onmouseover=function() {
                        this.style.backgroundColor = 'yellow';
                        this.style.color = 'red';
                        this.text = (this.text == 'bottom')? 'top' : 'bottom';
                        this.innerHTML = this.text + ' '+this.num;
                    }
                    //assign the onmouseout event handler
                    tdO[i].onmouseout=function() {
                        this.style.backgroundColor = '';
                        this.style.color = '';
                        this.text = (this.text == 'bottom')? 'top' : 'bottom';
                        this.innerHTML = this.text + ' '+this.num;
                    }
                }            
            }
        </script>
    </head>
    <body>
        <table id="main" cellspacing="5">
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>

Although your code works fine as I expected, I can’t change the contents of the each cell dynamically.

Your code can change like the following.
It can change only the text from “bottom” to “top”.

(1) bottom1 -> top1
(2) bottom2 -> top2
(3) bottom3 -> top3
(4) bottom4 -> top4

I want to change like the following.

(1) Hi, John -> John is from Amefica.

(2) Hello, Mary -> Mary get up early in the morning

(3) Jack is coming there -> He is my son.

(4) Ted is a student. -> He want to be a doctor.

ok, it’s like squeezing blood out of a stone but I think we are getting there :slight_smile:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black;
                width: 300px
            }
        </style>
        <script type='text/javascript'>
 
            //set up text array
            var tdText= [
              ['Hi, John','John is from America'],
              ['Hello, Mary','Mary get up early in the morning'],
              ['Jack is coming there','He is my son'],
              ['Ted is a student','He want to be a doctor']
            ];
 
            window.onload = function() {
                var tdO = document.getElementById('main').getElementsByTagName('td');
                //assign the properties to the td's'
                for(var i=0; i < tdO.length; i++) {
                    tdO[i].num = i;
                    tdO[i].innerHTML = tdText[i][0];
                    //assign the onmouseover event handler
                    tdO[i].onmouseover=function() {
                        this.style.backgroundColor = 'yellow';
                        this.style.color = 'red';
                        this.innerHTML = tdText[this.num][1];
                    }
                    //assign the onmouseout event handler
                    tdO[i].onmouseout=function() {
                        this.style.backgroundColor = '';
                        this.style.color = '';
                        this.innerHTML = tdText[this.num][0];
                    }
                }            
            }
        </script>
    </head>
    <body>
        <table id="main" cellspacing="5">
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>

Yes, you(we) are getting there. your code works fine. Thank you very much.

Although I have one more question related to this issue, I don’t ask it now because I am afraid that you sqeeze blood out of a stone.

ok, I’ve tweaked this a bit more so that the table is created dynamically according to the number of rows in the tdText array.

this way, if you add or delete rows of text from the array, you won’t have to touch the table’s html.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black;
                width: 300px
            }
        </style>
        <script type='text/javascript'>
            //set up text array
            var tdText= [
                ['Hi, John','John is from Amefica'],
                ['Hello, Mary','Mary get up early in the morning'],
                ['Jack is coming there','He is my son'],
                ['Ted is a student','He want to be a doctor']
            ];
         
            window.onload = function() {
                var numTexts = tdText.length;
                //create the table
                if(numTexts > 0) {
                    var tblO = document.createElement('table'); //create table
                    document.body.appendChild(tblO);    //append table to <body>
                    for(var i=0; i < numTexts; i++) { //create the tr's and td's'
                        var trO = tblO.insertRow(i);
                        var tdO = trO.insertCell(0);
                        tdO.num = i;
                        tdO.innerHTML = tdText[i][0];
                        //assign the onmouseover event handler
                        tdO.onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.innerHTML = tdText[this.num][1];
                        }
                        //assign the onmouseout event handler
                        tdO.onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.innerHTML = tdText[this.num][0];
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        
    </body>
</html>

Yes, that’s true.
I might be to get a kind of burden from your do hard work.

I changed your code a little for simplification like the follow.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black;
                width: 300px
            }
        </style>
        <script type='text/javascript'>
 
            //set up text array
            var tdText= [
              ['[COLOR="blue"]john'[/color],[color="red"]'john in America[/COLOR]'],
              ['[COLOR="blue"]Mary'[/color],[color="red"]'Mary in Europe[/COLOR]'],
              ['[COLOR="blue"]Jack'[/color],[color="red"]'Jack in Asia[/COLOR]'],
                ];
 
            window.onload = function() {
                var tdO = document.getElementById('main').getElementsByTagName('td');
                //assign the properties to the td's'
                for(var i=0; i < tdO.length; i++) {
                    tdO[i].num = i;
                    tdO[i].innerHTML = tdText[i][0];
                    //assign the onmouseover event handler
                    tdO[i].onmouseover=function() {
                        this.style.backgroundColor = 'yellow';
                        this.style.color = 'red';
                        this.innerHTML = tdText[this.num][1];
                    }
                    //assign the onmouseout event handler
                    tdO[i].onmouseout=function() {
                        this.style.backgroundColor = '';
                        this.style.color = '';
                        this.innerHTML = tdText[this.num][0];
                    }
                }            
            }
        </script>
    </head>
    <body>
        <table id="main" cellspacing="5">
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>

If I put my mouse on the 1st pink cell, the pink cell changes yellow cell and the text “John” will change to “John in America”.

If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text “Mary” will change to “Mary in Europe”.

If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text “Jack” will change to “Jack in Asia”.

I like to make it like the following.

If I put my mouse on the 1st pink cell, the pink cell changes yellow cell and the text “John” will change to “John in America”.
At the same time, I click the yellow cell area, it move to america.php.

If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text “Mary” will change to “Mary in Europe”.
At the same time, I click the yellow cell area, it move to MaryHome.php.

If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text “Jack” will change to “Jack in Asia”.
At the same time, I click the yellow cell area, it move to Jack.php.

The url of the links (america.php, MaryHome.php, Jack.php) will be dynamic.

I’ve added the links to the text array and the html for the table is now created dynamically according to how many rows there are in the text array

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black;
                width: 300px
            }
        </style>
        <script type='text/javascript'>
            //set up text array
            var tdText= [
                ['Hi, John','John is from America','url1'],
                ['Hello, Mary','Mary get up early in the morning','url2'],
                ['Jack is coming there','He is my son','url4'],
                ['Ted is a student','He want to be a doctor','url5']
            ];
            window.onload = function() {
                var numTexts = tdText.length;
                //create the table
                if(numTexts > 0) {
                    var tblO = document.createElement('table'); //create table
                    document.body.appendChild(tblO);    //append table to <body>
                    for(var i=0; i < numTexts; i++) { //create the tr's and td's'
                        var trO = tblO.insertRow(i);
                        var tdO = trO.insertCell(0);
                        tdO.num = i;
                        aO = document.createElement('a'); //create a link
                        aO.href = tdText[i][2];
                        aTxtO = document.createTextNode(tdText[i][0]);
                        aO.appendChild(aTxtO);
                        tdO.appendChild(aO);
                        //assign the onmouseover event handler
                        tdO.onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.getElementsByTagName('a')[0].innerHTML = tdText[this.num][1];
                        }
                        //assign the onmouseout event handler
                        tdO.onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.getElementsByTagName('a')[0].innerHTML = tdText[this.num][0];
                        }
                    }
                }
            }
        </script>
    </head>
    <body>

        <h3>Dynamically Created Table</h3>

    </body>
</html>

Yes, it could create the table dynamically.

The code above works fine when I clicks the text link in the cell instead of the whole cell area itself…

The whole cell is now a link.

hint: next time it will be a lot quicker to help you if you state exactly what you want in post #1.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            td {
                background-color: pink;
                color: black;
                width: 300px
            }
        </style>
        <script type='text/javascript'>
            //set up text array
            var tdText= [
                ['Hi, John','John is from Amefica','url1'],
                ['Hello, Mary','Mary get up early in the morning','url2'],
                ['Jack is coming there','He is my son','url4'],
                ['Ted is a student','He want to be a doctor','url5']
            ];
            window.onload = function() {
                var numTexts = tdText.length;
                //create the table
                if(numTexts > 0) {
                    var tblO = document.createElement('table'); //create table
                    document.body.appendChild(tblO);    //append table to <body>
                    for(var i=0; i < numTexts; i++) { //create the tr's and td's'
                        var trO = tblO.insertRow(i);
                        var tdO = trO.insertCell(0);
                        tdO.num = i;
                        aO = document.createElement('a'); //create a link
                        aO.href = tdText[i][2];
                        divO = document.createElement('div'); //create a div to take link across entire cell
                        divO.appendChild(document.createTextNode(tdText[i][0]));
                        aO.appendChild(divO);
                        tdO.appendChild(aO);
                        //assign the onmouseover event handler
                        tdO.onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.getElementsByTagName('div')[0].innerHTML = tdText[this.num][1];
                        }
                        //assign the onmouseout event handler
                        tdO.onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.getElementsByTagName('div')[0].innerHTML = tdText[this.num][0];
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <h3>Dynamically Created Table</h3>
    </body>
</html>