docEsercitazione n - Scienze Politiche
download 
Reclamo Transcript
Esercitazione n - Scienze Politiche
Informatica 2 (COM, WEB) A.A. 2009-10
Esercitazione n. 7: Banner a rotazione
Scopo: Scrivere una pagina Web nella quale viene visualizzata una immagine a rotazione. Le immagini possono essere
scaricate dal sito web del corso. Assumiamo che le immagini siano contenute in files di nome img001.gif, img002.gif,
ecc..
Inizio
Scrivete una pagina Web "banner.html".
Provate a visualizzare questo file su di un browser (Firefox, oppure IE) per verificare di aver scritto
correttamente tutti i tag. Dovreste ottenere questo risultato, con la immagine che cambia ogni 2 decimi di secondo (200
millisecondi).
Estensione 1
Permettete all’utente di inserire il numero di millisecondi di ritardo tra un fotogramma e l’altro, aggiungendo nella
pagina: 1) un campo di input dove inserire il numero di millisecondi; 2) un bottone con la scritta “Imposta millisecondi”.
Estensione 2
Usare la stessa tecnica per mostrare a rotazione una sequenza di tre immagini (usare ad esempio alcune delle immagini
della esercitazione n. 5).
ultima modifica: 01/12/2009
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>prova Banner scorrevoli</TITLE>
<META CONTENT="text/html; charset=ISO-8859-1" HTTP-EQUIV="Content-Type">
<SCRIPT TYPE="text/javascript">
var serieImmagini = new Array();
serieImmagini[0] = new Image();
serieImmagini[0].src = "palla/img001.gif";
serieImmagini[1] = new Image();
serieImmagini[1].src = "palla/img002.gif";
serieImmagini[2] = new Image();
serieImmagini[2].src = "palla/img003.gif";
serieImmagini[3] = new Image();
serieImmagini[3].src = "palla/img004.gif";
serieImmagini[4] = new Image();
serieImmagini[4].src = "palla/img005.gif";
serieImmagini[5] = new Image();
serieImmagini[5].src = "palla/img006.gif";
serieImmagini[6] = new Image();
serieImmagini[6].src = "palla/img005.gif";
serieImmagini[7] = new Image();
serieImmagini[7].src = "palla/img004.gif";
serieImmagini[8] = new Image();
serieImmagini[8].src = "palla/img003.gif";
serieImmagini[9] = new Image();
serieImmagini[9].src = "palla/img002.gif";
var indice = 0;
var tempo = 200;
var onOff;
function cambiaSRC()
{
// le immagini hanno indice 0,1,2,3,...9
if (indice < serieImmagini.length-1)
indice=indice+1
else
indice = 0;
document.banner.src = serieImmagini[indice].src;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Falso movimento</H1>
<IMG ALIGN="left" NAME="banner" border="1" SRC="palla/img001.gif" ALT="Palla in
movimento">
<FORM NAME="imposta" ACTION="javascript:void(0)">
<P>
<INPUT TYPE="button" VALUE="Ferma" NAME="bottoneFerma" DISABLED
onClick="window.clearInterval(onOff);
bottoneFerma.disabled=true; bottoneMuovi.disabled=false">
</P>
<P>
<INPUT TYPE="button" VALUE="Muovi" NAME="bottoneMuovi"
onClick="onOff = window.setInterval('cambiaSRC()',tempo);
bottoneFerma.disabled=false; bottoneMuovi.disabled=true">
</P>
</FORM>
</BODY>
</HTML>
ultima modifica: 01/12/2009
![[phpbb3] Cambiare l`immagine del forum - Pc Guide](http://s1.doczz.it/store/data/000227305_1-eef20f12a1a402aaa1920eeaee63748e-70x70.png "[phpbb3] Cambiare l`immagine del forum - Pc Guide")
