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.