Diapositive
Di Trantor

Indietro Avanti
Foto 1
Foto 2
Foto 3
Foto 4
Foto 5
<html> <head> <title>Diapositive</title> <style type="text/css"><!-- xmp {margin-top:450px} #foto1 {position:absolute; top:170; visibility:visible} #foto2 {position:absolute; top:170; visibility:hidden } #foto3 {position:absolute; top:170; visibility:hidden } #foto4 {position:absolute; top:170; visibility:hidden } #foto5 {position:absolute; top:170; visibility:hidden } // --> </style> <script type="text/javascript"><!-- var i=1,n_foto=5,slide=0,tempo=2000 var n = (document.layers) ? 1:0 var ie = (document.all) ? 1:0 var cx=(screen.width-600)/2 function Inizio() { for (var a=1;a<=n_foto; a++) { if (ie) {document.all["foto"+a].style.left=cx} if (n) {document.layers["foto"+a].left=cx} } Vedi(i) } function Vedi(i) { for (var a=1; a<=n_foto; a++) { if (ie) {document.all["foto"+a].style.visibility="hidden"} if (n) {document.layers["foto"+a].visibility="hidden"} } if (ie) {document.all["foto"+i].style.visibility="visible"} if (n) {document.layers["foto"+i].visibility="visible"} document.Controllo.Nome.value="Foto "+i } function Avanti() { i++ if (i>n_foto) {i=1} Vedi(i) } function Indietro() { i-- if (i<1) {i=n_foto} Vedi(i) } function SlideShow() { if (slide==1) {Avanti()} } setInterval("SlideShow()",tempo) // --> </script> </head> <body onload="Inizio()"> <hr><center> <form name="Controllo"> <a href="javascript:Indietro()"><img src="fs.gif" border="0" alt="Indietro" width="73" height="31"></a> <input type="button" value="Avvia SlideShow" onclick="slide=(slide+1)%2; if (slide==0) {this.value='Avvia SlideShow'}; if (slide==1) {this.value='Ferma SlideShow'}; "> <input type="text" size="10" name="Nome" readonly> <a href="javascript:Avanti()"><img src="fd.gif" border="0" alt="Avanti" width="73" height="31"></a> </form> </center> <div id="foto1"><img src="foto1.jpg" alt="Foto 1" width="600" height="400"></div> <div id="foto2"><img src="foto2.jpg" alt="Foto 2" width="600" height="400"></div> <div id="foto3"><img src="foto3.jpg" alt="Foto 3" width="600" height="400"></div> <div id="foto4"><img src="foto4.jpg" alt="Foto 4" width="600" height="400"></div> <div id="foto5"><img src="foto5.jpg" alt="Foto 5" width="600" height="400"></div> <hr> </body> </html>
Lezioni di Dynamic HTML