Newsgroup: it.comp.lang.javascript
Titolo: immagini animate.

Buondi', sono nuovo di sto grupo e spero di non postare la domanda che
hanno gia' fatto in 500 mila.
Dunque, il mio problema e' questo.
Ho dei bottoni che vanno con i vari onMouse, ma al posto di due semplici
gif (quella sull'over e quella sull'out) vorrei che ci fossero delle gif
animate, quindi con, per esempio, cinque o sei frame ciascuna e
soprattutto queste immagini non sono loopate, quindi mostrano i 5 frame
e poi si fermano.. Il fatto e' che una volta caricate il browser fa
vedere solo il frame finale di ogni azione, in pratica anche quando
passo col mouse sopra al bottone che mi serve non mostra tutta la gif di
5 frame ma solo l'ultimo dei frame, a meno che io non ricarichi
completamente la pagina (e questo sia in IE che in Netscape). Una
soluzione possibile e' animare i bottoni con javascritp, cioe' separare
la gif di 5 frame in 5 gif di un frame e farli animare allo script,
pero' cosi' e' parecchio pesante e sarebbe meglio che ci fosse solo una
gif e solo un comando javascript.
C'e' qualcosa che costringa il browser a fare rivedere tutta la gif???
Grazie in anticipo.
Spero di partecipare a sto gruppo parecchio adesso!
Ciao 
 
Spino

Mmmmh... io ho le specifiche di javascript 1.0 e non ho trovato nessun
metodo per le immagini, tipo reload()
Mi sà proprio che non si può fare nulla, a meno che non sia stato
implementato dopo.
CIAO :)


Se ti servono ho da qualche parte la "users guide" e la "references" per
1.2 zippate...
Ciao
Spino

 wrote in message
news:376F994A...@tin.it...


soprattutto queste immagini non sono loopate, quindi mostrano i 5 frame
Forse fa al caso tuo!

Questo e' un lavoro per me...
il seguente script e' complicatissimo (scherSo, e' solo lungo) ma ti
permette di:
1) Animare qualsiasi cosa (gif, jpg,png, bmp ecc ecc)
2) offre al momento 3 tipi di effetto: dal frame 1 al frame n, dal frame n
al frame 1 e da 1 a n in continuazione.
3) funziona egregiamente con qualsiasi browser Javascript 1.0 compatibile .
eccoti il tutto:
parte 1 dello script: le funzioni.
///Script Creato da Andrea Venturo "Nettuno" 
www.nettuno.org
///e-mail 
nett...@bigfoot.com
///Toglete tutti i commenti che vi pare, ma lasciate questi tre (ci terrei,
anche se lo script
///puo essere esterno alla pagina e quindi non si vede comunque).
function array(n){
 this.lenght=n
 for (var e=1;e<=n;e++){
 this[e]=0;
 }
 return this
}
function immagine(src, nomeimmagine, ext, fotogramma, nomefile){
this.src=src;
this.ext=ext;
this.fotogramma=fotogramma;
this.nomeimmagine=nomeimmagine;
this.path=nomefile;
this.repeat=0;
}
function anima(f,verso){
if (verso==1||verso==3){
if (verso==3){anim[f].repeat=1}
 ff=1
 }
if (verso==2) {
 ff=anim[f].fotogramma
 }
muovi(f,ff,verso)
}
function muovi (f,ff,verso){
var gg=f
var timeO="10"
if (verso==1||verso==2){
 if (ff>=1&&ff<=anim[f].fotogramma){
 document[anim[f].nomeimmagine].src=anim[f].src+anim[f].path+ff+anim[f].ext;
  if (verso==1){
   ++ff
  }
  if (verso==2){
   --ff
  anim[f].repeat=0;
   }
 if(ff<1){ff=0};
 if(ff>anim[f].fotogramma){ff=(anim[f].fotogramma+10)};
  setTimeout("muovi("+gg+","+ff+","+verso+")",timeO);
  }
 }
else {
timeO=200;
  if (anim[f].repeat==1){
  if (ff>=1&&ff<=anim[f].fotogramma){
document[anim[f].nomeimmagine].src=anim[f].src+anim[f].path+ff+anim[f].ext;
  }
  ++ff;
  if (ff>anim[f].fotogramma){ff=1};
  setTimeout("muovi("+gg+","+ff+","+verso+")",timeO);
  }
 else{
  ff=1;
document[anim[f].nomeimmagine].src=anim[f].src+anim[f].path+ff+anim[f].ext;
  }
 }
}
Di questo script l'unica cosa che devi sapere e' l'uso della funzione
"anima(x,y)" che devi mettere in corrispondenza degli eventi che generano
un'animazione (onmouseover, onclick, on load ecc).
X indica il numero dell'oggetto in un database (lo vedi tra poco) e dal
database la funzione "anima()" prende tutti i dettagli che gli occorrono.
Y indica il verso dell'animazione.
ecco l'altra meta' dello script:
anim=new array(10);
anim[1]=new immagine("./","arr_left_",".gif",4,"arr_left_")
anim[2]=new immagine("./","a1_",".gif",2,"a1_")
anim[3]=new immagine("./","a2_",".gif",2,"a2_")
anim[4]=new immagine("./","a3_",".gif",2,"a3_")
anim[5]=new immagine("./","a4_",".gif",2,"a4_")
anim[6]=new immagine("./","a5_",".gif",2,"a5_")
anim[7]=new immagine("./","a6_",".gif",2,"a6_")
anim[8]=new immagine("./","a7_",".gif",2,"a7_")
anim[9]=new immagine("./","a8_",".gif",2,"a8_")
anim[10]=new immagine("./","arr_right_",".gif",4,"arr_right_")
questa cosa:
1) Crea una matrice di nome anim come istanza della oggetto array, con 10
elementi
2) le righe successive definiscono le proprieta' di anim quali istanze
dell'oggetto "immagine" che a sua volta ha le seguenti proprieta':
src(percorso nome del file escluso) nomeimmagine (valore dell'attributo name
dell'immagine da animare, o se si trova in un'altra finstra qui ci metti
tutto il pecorso a partire da "top.frame.ecc" o da "opener.ecc" o quello che
e'), ext (estensione del file), nomefile (parte del nome del file).
E richiede che i frame dell'immagine rispettino le seguenti caratteristiche:
debbono avere tutti la stessa estensione e la stessa parte iniziale del
nome, con un numero d'ordine come unica differenSa, vale a dire
se "frame" e' il nome e la sequenza e' composta da "N" frame tu devi
rinominare le immagini "frame1.gif" frame2.gif,...., frameN.gif".
nello script le righe come questa:
anim[9]=new immagine("./","a8_",".gif",2,"a8_")
vanno modificate secondo le tue esigenze. Volendo puoi specificare piu' di
un'animazione per uno stesso oggetto, basta lasciare invariata la proprieta'
"nomeimmagine" e cambiare il nome del file, e naturalmente associare le
varie animazioni a eventi diversi.
Nel codice Html quello che devi fare, per animare un'immagine al passaggio
del mouse su di essa e' scrivere:
<a href="blabla.html" onMouseOver="anima(x,y)" onMouseOut="anima(x,y)"><img
src="image1.bla" name="nomeimmagine" width e height se occorrono border=0 se
coccorre></a>
l'intervallo di tempo tra un frame e l'altro e' determinato dal valore della
variabile TimeO, che non ho potuto definire come proprieta' dell'oggetto img
per motivi di compatibilita' tra browser (non sono riuscito a far leggere
alla funzione setTimeout() un beneamato picchio che risiedesse al di fuori
della funzione che contiene la chiamata a setTimeout() da netscape).
Una versione funzionante di questo script la trovi presso:
http://members.xoom.it/ilde
nel frame inferiore.
Spero di esserti stato d'aiuto.
In alternativa puoi usare questo (rozzo) metodo:
<a href="" onmouseover="document.pippo.src='immagineanimata1.gif'"
onmouseout="document.pippo.src='immagineanimata2.gif'"><img name="pippo"
src="immagine.gif" ></a>
dipende da che cosa vuoi ottenere.
--
La Forza dei Forti sta nell'Attraversare le Traversie con occhio sereno.
(Paperinik)
Nettuno