Javascript: Cambiare valore Css

[BlackFenix06]

Salve a tutti, io avrei un piccolo problema con Javascript:

<script type="text/javascript" src="http://poliglot.altervista.org/BlackFenix06/Utilita/menu.js"></script>
<link rel="stylesheet" type="text/css" href="http://poliglot.altervista.org/BlackFenix06/Utilita/menu.css">
<style type="text/css">
<!-- 
#img_1, #img_2, #img_3, #img_4, #img_5, #img_6, #img_7, #img_8, #img_9 {width: 120px; border: none; opacity: 1.0;}
#td_img_1 {color: #FF0000; font-weight:bold; text-align: center; height: 87px;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
opa_1 = 0;
opa_2 = 0;
opa_3 = 0;
opa_4 = 0;
opa_5 = 0;
opa_6 = 0;
opa_7 = 0;
opa_8 = 0;
opa_9 = 0;
opak_1 = 10;
opak_2 = 10;
opak_3 = 10;
opak_4 = 10;
opak_5 = 10;
opak_6 = 10;
opak_7 = 10;
opak_8 = 10;
opak_9 = 10;
function imgx_1() {
if (opak_1==0) {
document.getElementById("img_1").style.display = "none";
document.getElementById("td_img_1").innerHTML="Homepage";
setTimeout(imgy_1, 1000);
}
else {
opak_1=opak_1-1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
setTimeout(imgx_1, 100);
}
}
function imgy_1() {
if (opak_1==10) {
document.getElementById("img_1").style.display = "block";
document.getElementById("td_img_1").innerHTML="";
}
else {
opak_1=opak_1+1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
setTimeout(imgy_1, 100);
}
}
//-->
</script>
<table class="tab_menu">
<tr>
<td id="td_img_1"><img src="http://files.blackfenix06.webnode.it/200000006-29e992ae2a/giphy.gif" onload="part(); loadtime()" onmousemove="imgx_1()" id="img_1"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000007-971f09815f/volpe_converted.gif" id="img_2"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000008-2e0e72f0cb/giphy%20p.gif" id="img_3"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000015-264be2744c/naruto_kyuubi_mode__gif__by_loganightlegend-d5sgk1m.gif" id="img_4"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000014-6d3816f2c8/giphy3.gif" id="img_5"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000012-aae7cabdf3/tumblr_ltwmjzOJqk1qjtzsdo1_500.gif" id="img_6"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000013-f404200d96/tumblr_mke5swzMMd1s5qslao1_500.gif" id="img_7"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000018-e29d3e397f/tumblr_nf6dxvCkKc1sial0xo3_500.gif" id="img_8"></td>
</tr>
<tr>
<td><img src="http://files.blackfenix06.webnode.it/200000017-1c7f81d7a2/3079636105_1_3_Dr1LnjvV.gif" id="img_9"></td>
</tr>
<tr>
<td id="clock"></td>
</tr>
</table>
<table class="tab_agg">
<tr>
<td id="agg"></td>
<td id="not"></td>
</tr>
</table>

Il codice funziona perfettamente fino a uando deve fare questo:

function imgy_1() {
if (opak_1==10) {
document.getElementById("img_1").style.display = "block";
document.getElementById("td_img_1").innerHTML="";
}
else {
opak_1=opak_1+1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
setTimeout(imgy_1, 100);
}
}

Usando gli allert ho notato che il codice si interrompe e quindi non viene eseguito quì:

document.getElementById("img_1").style.opacity = opa_1;

Cosa devo fare per risolvere il problema? Purtroppo non sono riuscito a capire la causa e quindi mi affido al vostro aiuto

PS: Questa parte:

opa_2 = 0;
opa_3 = 0;
opa_4 = 0;
opa_5 = 0;
opa_6 = 0;
opa_7 = 0;
opa_8 = 0;
opa_9 = 0;
opak_2 = 10;
opak_3 = 10;
opak_4 = 10;
opak_5 = 10;
opak_6 = 10;
opak_7 = 10;
opak_8 = 10;
opak_9 = 10;

Serve per le altre immagini all'interno della tabella