I cant figure out how to get these 2 scripts to work together
One is an image mouseover effect, the other is a tabs script.

Here is the code, not too long.




<BODY><div id=EchoTopic>

<a href="javascript:activateTab('page1')" onmouseover="image1.src='http://img9.imageshack.us/img9/1594/1overview2.png';"
onmouseout="image1.src='http://img694.imageshack.us/img694/5022/1overview4.png';">
<img name="image1" src="http://img694.imageshack.us/img694/5022/1overview4.png" border=0></a>

<a href="javascript:activateTab('page2')" onmouseover="image2.src='http://img571.imageshack.us/img571/2992/1videos2.png';"
onmouseout="image2.src='http://img638.imageshack.us/img638/9716/1videos4.png';">
<img name="image2" src="http://img638.imageshack.us/img638/9716/1videos4.png" border=0></a>

<a href="javascript:activateTab('page3')" onmouseover="image3.src='http://img196.imageshack.us/img196/6906/1sysreq2.png';"
onmouseout="image3.src='http://img208.imageshack.us/img208/453/1sysreq4.png';">
<img name="image3" src="http://img208.imageshack.us/img208/453/1sysreq4.png" border=0></a>

<a href="javascript:activateTab('page4')" onmouseover="image4.src='http://img42.imageshack.us/img42/449/1links2.png';"
onmouseout="image4.src='http://img440.imageshack.us/img440/3765/1links4.png';">
<img name="image4" src="http://img440.imageshack.us/img440/3765/1links4.png" border=0></a>

</BODY>
<script type="text/javascript">
function activateTab(pageId) {
var tabCtrl = document.getElementById('tabCtrl');
var pageToActivate = document.getElementById(pageId);
for (var i = 0; i < tabCtrl.childNodes.length; i++) {
var node = tabCtrl.childNodes[i];
if (node.nodeType == 1) { /* Element */
node.style.display = (node == pageToActivate) ? 'block' : 'none';
}
}
}


</script>


<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

image1 = new Image();
image1.src = "http://img9.imageshack.us/img9/1594/1overview2.png";

image2 = new Image();
image2.src = "http://img571.imageshack.us/img571/2992/1videos2.png";

image3 = new Image();
image3.src = "http://img196.imageshack.us/img196/6906/1sysreq2.png";

image4 = new Image();
image4.src = "http://img42.imageshack.us/img42/449/1links2.png";

// End -->
</script>
</HEAD>





<div id="tabCtrl">

<div id="page1" style="display: block;">

<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
table.gridtable th {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #919191;
}
table.gridtable td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>




<table class="gridtable"><tbody>
<tr> <th>Status</th><th>Genre</th><th>Sub-genre</th><th>Publisher</th><th>Graphics</th><th>File size</th><th>User Rating</th> </tr>
<tr> <td>Live</td><td>MMORPG</td><td>Fantasy, Super-hero</td><td>SOE</td><td>3D, High</td><td>17 GB</td><td><div id="pd_rating_holder_5406102">

</div>
<script type="text/javascript">
PDRTJS_settings_5406102 = {
"id" : "5406102",
"unique_id" : "default",
"title" : "",
"permalink" : ""
};
</script>
<script src="http://i.polldaddy.com/ratings/rating.js" type="text/javascript">
</script></td> </tr>
</tbody></table>
</div>
<div id="page2" style="display: none;">

Page 2</div>
<div id="page2" style="display: none;">

Page 2</div>
<div id="page3" style="display: none;">

Page 3</div>
<div id="page4" style="display: none;">

Page 4</div>
<div id="page5" style="display: none;">

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

image1 = new Image();
image1.src = "http://img9.imageshack.us/img9/1594/1overview2.png";

image2 = new Image();
image2.src = "http://img571.imageshack.us/img571/2992/1videos2.png";

image3 = new Image();
image3.src = "http://img196.imageshack.us/img196/6906/1sysreq2.png";

image4 = new Image();
image4.src = "http://img42.imageshack.us/img42/449/1links2.png";

// End -->
</script>

</HEAD>page5</div>
</div>



I been using w3s ' try it' page... The effect i want works on there, but when i put it into my page The tabs work, but the mouse-over effect does not work.

http://www.w3schools.com/html/tryit....=tryhtml_intro