Javascript: Cambiare valore Css

BlackFenix06

Nuovo Utente
23 Dic 2014
2
0
0
Salve a tutti, io avrei un piccolo problema con Javascript:

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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
crealatualista [Javascript] Cambiare record tabella... Javascript 4
napuleone [Javascript] cambiare i parametri di stampa con js Javascript 2
V javascript - cambiare immagine di sfondo di un div Javascript 3
D [Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana Javascript 11
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
max_400 Cambiare le immagini con un click senza javascript HTML e CSS 4
P Problema con apici nelle stringhe [era:Cambiare grandezza carattere con JavaScript] Javascript 3
G Come cambiare un css con javascript ?? HTML e CSS 0
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1

Discussioni simili