Finalmente dopo tanta fatica sono riuscito a trovare una soluzione XD
Posto il codice con la soluzione per chi fosse interessato e spiego cosa ho cambiato:
codice:
<style type="text/css">
<!--
#img_1 {width: 120px; border: none; opacity: 1.0; display: block;}
#td_img_1 {color: #FF0000; font-weight:bold; text-align: center; height: 87px;}
#tex_1 {display: none;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
txe = 0;
repx_1 = 0;
timo_1 = 0;
timo_2 = 0;
timo_3 = 0;
opa_1 = 0;
opak_1 = 10;
function parten() {
if (repx_1==0) {
repx_1=repx_1+1;
imgx_1();
}
}
function imgx_1() {
if (opak_1==0) {
clearTimeout(timo_1);
document.getElementById("img_1").style.display="none";
document.getElementById("tex_1").style.display="block";
setTimeout(imgy_1, 1000);
}
else {
clearTimeout(timo_1);
opak_1=opak_1-1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
timo_1 = setTimeout(imgx_1, 100);
}
}
function imgy_1() {
if (opak_1==10) {
clearTimeout(timo_3);
txe=txe-1;
repx_1=repx_1-1;
}
else {
if (txe==0) {
txe=txe+1;
document.getElementById("tex_1").style.display="none";
document.getElementById("img_1").style.display="block";
timo_2 = setTimeout(imgy_1, 100);
}
else {
clearTimeout(timo_2);
clearTimeout(timo_3);
opak_1=opak_1+1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
timo_3 = 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" id="img_1" onmouseover="parten()"><span id="tex_1">Homepage</span></td>
</tr>
</table>
Allora, la prima parte da analizzare è questa:
codice:
repx_1 = 0;
function parten() {
if (repx_1==0) {
repx_1=repx_1+1;
imgx_1();
}
}
Nella tabella, l'immagine ha l'evento onmouseover:
codice:
<img src="http://files.blackfenix06.webnode.it/200000006-29e992ae2a/giphy.gif" id="img_1" onmouseover="parten()">
Quando il mouse si muove all'interno dell'immagine, fa partire la funzione parten(). Essa controlla se la variabile repx_1 vale 0. Se essa vale 0, richiama la funzione imgx_1() e la variabile passa al valore 1, se non vale 0 (quindi 1) termina l'esecuzione dello script. Questa funzione serve a non far ripetere lo script nel caso venga mosso il mouse nell'esecuzione creando un loop.
La seconda parte da analizzare è questa:
codice:
timo_1 = 0;
opa_1 = 0;
opak_1 = 10;
function imgx_1() {
if (opak_1==0) {
clearTimeout(timo_1);
document.getElementById("img_1").style.display="none";
document.getElementById("tex_1").style.display="block";
setTimeout(imgy_1, 1000);
}
else {
clearTimeout(timo_1);
opak_1=opak_1-1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
timo_1 = setTimeout(imgx_1, 100);
}
}
La funzione imgx_1(), richiamata in precedenza, controlla se la variabile opak_1 è uguale a 0.
Nel caso non valga 0 verrà eseguito questo passaggio:
codice:
else {
clearTimeout(timo_1);
opak_1=opak_1-1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
timo_1 = setTimeout(imgx_1, 100);
}
Prima cosa viene disattivato qualsiasi timer con variabile timo_1, anche se non è attivo un timer con quella variabile non crea problemi. Dopo ridurrà la variabile opak_1 di uno, per poi dare il valore di quest'ultima alla variabile opa_1 diviso 10. Questo perchè l'attributo CSS3 opacity funziona con numeri decimali (da 0.0 a 1.0). A questo punto modifica l'attributo opacity dell'immagine con id img_1 del valore di opa_1. Fatto questo un setTimeout con variabile timo_1 fa ripartire immediatamente la funzione imgx_1() da capo, in modo da creare un ciclo che si ripeta fino a quando la variabile opak_1 varrà 0. Il clearTimeout detto in precedenza serve appunto per disattivare il setTimeout in modo che ripetendo la funzione essi non si accavallino.
Una volta che nel ciclo opak_1 vale 0, non verrà più fatto il ciclo, ma verrà eseguita questa istruzione:
codice:
if (opak_1==0) {
clearTimeout(timo_1);
document.getElementById("img_1").style.display="none";
document.getElementById("tex_1").style.display="block";
setTimeout(imgy_1, 1000);
}
Come prima viene innanzitutto disattivato il setTimeout (timo_1). Poi verrà modificato l'attributo display dell'immagine a none, in questo modo essa scomparerà del tutto. Infine verrà modificato l'attributo display del testo nascosto, con id tex_1, a block, in modo che sia visibile. Il testo di partenza era nascosto.
codice:
<style type="text/css">
<!--
#tex_1 {display: none;}
-->
</style>
<span id="tex_1">Homepage</span>
Infine un'ultimo setTimeout dopo un secondo richiamerà la funzione imgy_1(). Essa farà il lavoro contrario di quanto spiegato fin'ora.
La terza parte, ovvero il ripristino, da analizzare è questa:
codice:
function imgy_1() {
if (opak_1==10) {
clearTimeout(timo_3);
txe=txe-1;
repx_1=repx_1-1;
}
else {
if (txe==0) {
txe=txe+1;
document.getElementById("tex_1").style.display="none";
document.getElementById("img_1").style.display="block";
timo_2 = setTimeout(imgy_1, 100);
}
else {
clearTimeout(timo_2);
clearTimeout(timo_3);
opak_1=opak_1+1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
timo_3 = setTimeout(imgy_1, 100);
}
}
}
La funzione imgy_1(), richiamata in precedenza, controlla se la variabile opak_1 è uguale a 10.
Nel caso non valga 10 verrà eseguito questo passaggio:
codice:
else {
if (txe==0) {
txe=txe+1;
document.getElementById("tex_1").style.display="none";
document.getElementById("img_1").style.display="block";
timo_2 = setTimeout(imgy_1, 100);
}
else {
clearTimeout(timo_2);
clearTimeout(timo_3);
opak_1=opak_1+1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
timo_3 = setTimeout(imgy_1, 100);
}
}
Un'ultimo controllo per verificare se la variabile txe è 0.
Nel caso sia 0, il testo con id tex_1 scompare modificando di nuovo l'attributo display per far ricompaire l'immagine con id img_1. Viene aggiunto 1 alla variabile txe. Un setTimeout con variabile timo_2 fa ripartire la funzione da capo.
Nel caso sia 1, le prime due istruzione sono due clearTimeout, che servono allo stesso modo del primo che abbiato usato la prima volta (timo_1). Alla variabile opak_1 viene aggiunto 1. Dopo alla variabile opa_1 viene di nuovo assegnato il valore di opak_1 diviso dieci. A questo punto viene modificata l'attributo opacity come prima, solo che in questo caso al posto di scomparire, riapparirà. Un setTimeout con variabile timo_3 fa richiama la funzione imgy_1() per creare un ciclo fino a quando opak_1 non varrà 10.
A cosa serve la variabile txe? Serve a fare in modo che l'istruzione:
codice:
document.getElementById("tex_1").style.display="none";
document.getElementById("img_1").style.display="block";
Venga solo eseguita una volta.
Una volta che nel ciclo opak_1 vale 10, non verrà più fatto il ciclo, ma verrà eseguita questa istruzione:
codice:
if (opak_1==10) {
clearTimeout(timo_3);
txe=txe-1;
repx_1=repx_1-1;
}
Come sempre un clearTimeout con variabile timo_3 disattiva il setTimeout. A questo punto sia alla variabile txe, sia alla variabile repx_1, viene tolto 1, in modo da riportarle al valore iniziale.
Dopo questo il codice è pronto per essere eseguito di nuovo da capo appena si muove il mouse all'interno dell'immagine. L'effetto potete vederlo al link postato nella mia precedente risposta 
Rispondi quotando
Originariamente inviata da BlackFenix06
