Salve a tutti, io avrei un piccolo problema con Javascript:
in poche parole:
L'immagine (con id img_1) passandoci con il mouse sopra inizia gradualmente a scomparire.
Dopo aver richiamato la funzione imgx_1() viene controllato se la variabile opak_1 vale 0. Se non vale 0 allora a opak_1 viene tolto 1. Dopo viene assegnato alla variabile opa_1 il valore di opak_1 diviso dieci (questo perchè l'attributo CSS3 opacity ha numeri decimali che vanno da 0.0 a 1.0). Fatto ciò all'attributo opacity dell'immagine viene assegnato il valore di opa_1. La funzione viene ripetuta, grazie a un setTimeout, fino a quando la variabile opak_1 vale 0. Una volta che la variabile vale 0, l'immagine scompare modificando l'attributo display e appare la scritta Homepage. Un setTimeout dopo un secondo richiama la funzione imgy_1.
Dopo aver richiamato la funzione imgy_1() viene controllato se la variabile opak_1 vale 10. Se non vale 10 allora viene controllato se la variabile txe vale 0. Se vale 0 allora a txe viene aggiunto 1 e il testo Homepage viene cancellato e l'immagine riappare modificando l'attributo display (anche se non è visibile). Fatto ciò un setTimeout fa ripartire la funzione imgy_1(). Ora che la variabile txe non vale più 0, alla variabile opak_1 (che vale 0) viene aggiunto 1. Dopo viene assegnato alla variabile opa_1 il valore di opak_1 diviso dieci. Fatto ciò all'attributo opacity dell'immagine viene assegnato il valore di opa_1. La funzione viene ripetuta, sempre grazie a un setTimeout, fino a quando la variabile opak_1 vale 10. Una volta che la variabile vale 10, l'immagine è di nuovo visibile e alla variabile txe viene tolto 1 (in modo da riportarla a 0).
Così il ciclo riparte appena il mouse si muove di nuovo sopra l'immagine.
Ora il problema è che il codice funziona tutto perfettamente fino a quando deve essere eseguito questo nella seconda funzione imgy_1() per aumentare l'opacity:
Qual'è il problema? Perchè il codice si interrompe li e non esegue l'istruzione?
Codice:
<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;
opak_1 = 10;
txe=0;
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) {
txe=txe-1;
}
else {
if (txe==0) {
txe=txe+1;
document.getElementById("img_1").style.display = "block";
document.getElementById("td_img_1").innerHTML="";
setTimeout(imgy_1, 100);
}
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" onmousemove="imgx_1()" id="img_1"></td>
</tr>
</table>in poche parole:
L'immagine (con id img_1) passandoci con il mouse sopra inizia gradualmente a scomparire.
Codice:
opa_1 = 0;
opak_1 = 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);
}Dopo aver richiamato la funzione imgx_1() viene controllato se la variabile opak_1 vale 0. Se non vale 0 allora a opak_1 viene tolto 1. Dopo viene assegnato alla variabile opa_1 il valore di opak_1 diviso dieci (questo perchè l'attributo CSS3 opacity ha numeri decimali che vanno da 0.0 a 1.0). Fatto ciò all'attributo opacity dell'immagine viene assegnato il valore di opa_1. La funzione viene ripetuta, grazie a un setTimeout, fino a quando la variabile opak_1 vale 0. Una volta che la variabile vale 0, l'immagine scompare modificando l'attributo display e appare la scritta Homepage. Un setTimeout dopo un secondo richiama la funzione imgy_1.
Codice:
txe=0;
function imgy_1() {
if (opak_1==10) {
txe=txe-1;
}
else {
if (txe==0) {
txe=txe+1;
document.getElementById("td_img_1").innerHTML="";
document.getElementById("img_1").style.display = "block";
setTimeout(imgy_1, 100);
}
else {
opak_1=opak_1+1;
opa_1=opak_1/10;
document.getElementById("img_1").style.opacity = opa_1;
setTimeout(imgy_1, 100);
}
}
}Dopo aver richiamato la funzione imgy_1() viene controllato se la variabile opak_1 vale 10. Se non vale 10 allora viene controllato se la variabile txe vale 0. Se vale 0 allora a txe viene aggiunto 1 e il testo Homepage viene cancellato e l'immagine riappare modificando l'attributo display (anche se non è visibile). Fatto ciò un setTimeout fa ripartire la funzione imgy_1(). Ora che la variabile txe non vale più 0, alla variabile opak_1 (che vale 0) viene aggiunto 1. Dopo viene assegnato alla variabile opa_1 il valore di opak_1 diviso dieci. Fatto ciò all'attributo opacity dell'immagine viene assegnato il valore di opa_1. La funzione viene ripetuta, sempre grazie a un setTimeout, fino a quando la variabile opak_1 vale 10. Una volta che la variabile vale 10, l'immagine è di nuovo visibile e alla variabile txe viene tolto 1 (in modo da riportarla a 0).
Così il ciclo riparte appena il mouse si muove di nuovo sopra l'immagine.
Ora il problema è che il codice funziona tutto perfettamente fino a quando deve essere eseguito questo nella seconda funzione imgy_1() per aumentare l'opacity:
Codice:
document.getElementById("img_1").style.opacity = opa_1;Qual'è il problema? Perchè il codice si interrompe li e non esegue l'istruzione?
