[JS] Immagine che si espande e si comprime

Ciao a tutti!
Ho fatto questo script:

Codice HTML:

---

<script language="javascript">
var altezza=0;
var esp=0;

function cronologia(){
 if(esp==0){
 exp=setInterval("espandi()",10);
 esp=1;
 }else{
 comp=setInterval("comprimi()",10);
 esp=0;
 }
}

function espandi(){
var immagine = document.getElementById("cronologia");
var hal=immagine.style.height.replace("px","");
 if(hal!="520"){
  immagine.style.height=altezza;
  altezza=altezza+10;
  }else{
  clearInterval(exp);
  }

}
function comprimi(){
var immagine = document.getElementById("cronologia");
var hal=immagine.style.height.replace("px","");
 if(hal>=0){
  immagine.style.height=altezza;
  altezza=altezza-10;
  }else{
  clearInterval(comp);
  }

}

</script>

<img id="cronologia" style="width:300px;height:0px" src="cronologia.png"/><br>
<a href="javascript:cronologia()">Cronologia</a>

---

che permette, cliccando su Cronologia, di espandere e comprimere l'immagine cronologia.png. Con FireFox funziona tutto benissimo mentre con IE si espande, si comprime e mi da un errore (che non ho capito nemmeno quale) e si blocca il tutto (non è più possibile espanderlo).

Sapete perchè IE mi fa sto scherzo?

Ma comp e exp dove li crei? Poi non manca la funzione clearInterval?

Codice:

---

<script language="javascript">
var altezza=0;
var esp=0;

function cronologia(){
 if(esp==0){
 exp=setInterval("espandi()",10);
 esp=1;
 }else{
 comp=setInterval("comprimi()",10);
 esp=0;
 }
}

function espandi(){
var immagine = document.getElementById("cronologia");
var hal=immagine.style.height.replace("px","");
 if(hal!="520"){
  immagine.style.height=altezza;
  altezza=altezza+10;
  }else{
  clearInterval(exp);
  }

}
function comprimi(){
var immagine = document.getElementById("cronologia");
var hal=immagine.style.height.replace("px","");
 if(hal>=0){
  immagine.style.height=altezza;
  altezza=altezza-10;
  }else{
  clearInterval(comp);
  }

}

</script>

---

E' tutto lì...
Mi dà un errore nella linea

Codice:

---

if(hal>=0){
  immagine.style.height = altezza;
  altezza = altezza-10;

---

Al posto di

Codice:

---

if(hal>=0){

---

Prova a mettere:

Codice:

---

if(parseInt(hal)>=0){

---

Niente.. stesso errore..

Ma che errore ti dà?

IE mi da "Argomento non valido" mentre ho appena fatto caso che la console javascript di FF dopo il primo ciclo espandi/comprimi mi dice "Errore nell'interpretazione del valore della proprietà 'height'. Dichiarazione tralasciata", anche se poi si può continuare il ciclo..

Prova ad assegnargli oltre all'altezza anche il valore "px".

Codice:

---

immagine.style.height=altezza+"px";

---

Non è cambiato niente... non riesco proprio a capire il perché...

se provi a definire una variabile altezza all'inizio dello script vuota??

Risolto!

Codice:

---

<script language="javascript">
var esp = 0;

function cronologia(){
 if(esp==0){
  exp = setInterval("espandi()",10);
  esp = 1;
 }else{
  comp = setInterval("comprimi()",10);
  esp = 0;
 }
}

function espandi(){
 var immagine = document.getElementById("cronologia");
 var hl = parseInt(immagine.style.height);
 if(hl!=520){
  immagine.style.height = hl + 10;
 }else{
  clearInterval(exp);
 }
}
function comprimi(){
 var immagine = document.getElementById("cronologia");
 var hl = parseInt(immagine.style.height);
 if(hl!=0){
  immagine.style.height = hl - 10;
 }else{
  clearInterval(comp);
 }
}

</script>

---

Praticamente il ciclo "comprimi" non si fermava mai, allora gli ho messo, anzichè >=0, !=0.

Si può chiudere!