Due visualizzatori in una pagina su webfract di Eliana Argenti e Tommaso Bientinesi

Home

Contatti

DUE VISUALIZZATORI

Questo è l'esempio relarivo al trucco in breve numero 3.

IL MIO PRIMO ALBUM

Baldo, il mio nuovo cucciolo

IL MIO SECONDO ALBUM

Cavallo

Ecco lo script: da inserire fra i tag <head> ed </head>

<script type="text/javascript"> num=0 //numero di diapositive del primo visualizzatore flag=0 //variabile booleana che verifica se si va in automatico o in manuale nel 1° v. num1=0 //numero di diapositive del secondo visualizzatore flag1=0 //variabile booleana che verifica se si va in automatico o in manuale nel 2° v. listap=new Array('http://www.webfract.it/GUIDA/baldo4p.jpg','http://www.webfract.it/GUIDA/eddiep.jpg','http://www.webfract.it/GUIDA/pae1pic.jpg','http://www.webfract.it/GUIDA/uccellop.jpg') //miniature nel primo v. lista=new Array('<img src="http://www.webfract.it/GUIDA/baldo4.jpg" width="196", height="195">','<img src= "http://www.webfract.it/GUIDA/eddie.jpg" width="196", height="195">','<img src= "http://www.webfract.it/GUIDA/pae1.jpg" width="298", height="206">','<img src= "http://www.webfract.it/GUIDA/uccello.jpg" width="172", height="91">') // ingrandimenti nel primo v. descrizione=new Array('Baldo, il mio nuovo cucciolo', 'Eddie, il mio adorabile barboncino grigio', 'Camilla, la gatta più vanitosa del mondo', 'Pippo, un uccellino dai cento colori') //descrizione nel 1° v. titolo= new Array("Baldo", "Eddie", "Camilla", "Pippo") //titolo nel 1° v. listap1=new Array('http://www.webfract.it/GUIDA/cavp.jpg','http://www.webfract.it/GUIDA/pecp.jpg','http://www.webfract.it/GUIDA/miciop.jpg') //miniature nel 2° v. lista1=new Array('<img src="http://www.webfract.it/GUIDA/cav.jpg" width=192, height=192>','<img src= "http://www.webfract.it/GUIDA/pec.jpg" width=192, height=192>','<img src= "http://www.webfract.it/GUIDA/micio.jpg" width=192, height=192>') // ingrandimenti nel 2° v. descrizione1=new Array('Cavallo', 'Pecora', 'Gattino') //descrizione nel 2° v. titolo1= new Array("Puccia", "Dolly", "Micio") //titolo nel 2° v. maxL=new Array(220,220,322,196) //larghezza delle finestre nel 1° v. maxH=new Array(250,250,260,150) // altezza delle finestre nel 1° v. maxL1=new Array(220,220,220) //larghezza delle finestre nel 2° v. maxH1=new Array(270,270,270) //altezza delle finestre nel 2° v. function Mostra(conta) { //funzione che scrive la descrizione nello span di nome "descrivi" del 1° v. if (document.images) { document.immagine.src=listap[conta] } if(document.all) { document.all('descrivi').innerHTML=descrizione[conta] } else if(document.getElementById){ document.getElementById("descrivi").innerHTML =descrizione[conta] } else { alert("il tuo browser non supporta questo metodo") } } function Mostra1(conta) { //funzione che scrive la descrizione nello span di nome "descrivi1" del 2° v. if (document.images) { document.immagine1.src=listap1[conta] } if(document.all) { document.all('descrivi1').innerHTML=descrizione1[conta] } else if(document.getElementById){ document.getElementById("descrivi1").innerHTML =descrizione1[conta] } else { alert("il tuo browser non supporta questo metodo") } } function apri(conta) { //funzione che apre l'ingrandimento nel 1° v. L=maxL[conta] H=maxH[conta] finestra= window.open('vuoto.htm','nome','width=400,height=400') finestra.focus() finestra.resizeTo(L,H) finestra.document.write('<html><title>'+titolo[conta]+'</title><body>' + lista[conta] +'</body></html>') finestra.document.close() } function apri1(conta) { //funzione che apre l'ingrandimento nel 2° v. L=maxL1[conta] H=maxH1[conta] finestra1= window.open('vuoto1.htm','nome1','width=200,height=200') finestra1.focus() finestra1.resizeTo(L,H) finestra1.document.write('<html><title>'+titolo1[conta]+'</title><body>' + lista1[conta] +'</body></html>') finestra1.document.close() } function automatico() { // funzione che apre il 1° v. in automatico. if (flag==1) { document.MioForm.bottone.value="Auto" flag1=0 } else { document.MioForm.bottone.value="Stop" flag=1 vai() } return flag } function automatico1() { // funzione che apre il 2° v. in automatico. if (flag1==1) { document.MioForm1.bottone1.value="Auto" flag1=0 } else { document.MioForm1.bottone1.value="Stop" flag1=1 vai1() } return flag1 } function vai () { //funzione che avia il 1° v. if (flag==1) { if (document.images) { num++ if (num>=listap.length) num=0 Mostra(num) document.MioForm.Scelta.options[num].selected=true setTimeout("vai()" ,3000) } } } function vai1 () { //funzione che avia il 2° v. if (flag1==1) { if (document.images) { num1++ if (num1>=listap1.length) num1=0 Mostra1(num1) document.MioForm1.Scelta.options[num1].selected=true setTimeout("vai1()" ,3000) } } } </script>
E questo è il codice da inserire nel <body>

<p align=center><table border=1 width=500 cellpadding=5 cellspacing=10 bgcolor=navy><caption><b><font color=red>IL MIO PRIMO ALBUM</B></caption></font><tr><td BGCOLOR=DARKORANGE><center><a href="javascript:apri(MioForm.Scelta.options.selectedIndex)"><img src="baldo4p.jpg" height=49 width=49 name="immagine"></a></center> <td width=60><form name="MioForm">  <SELECT size="5" name="Scelta" onChange="Mostra(MioForm.Scelta.options.selectedIndex)">  <option value="0" selected> foto 1 <option value="1"> foto 2 <option value="2"> foto 3 <option value="3"> foto 4 </option> </SELECT> <tr><td bgcolor="#E0E4E3"><font color=maroon size=3><b><tt><span id="descrivi">Baldo, il mio nuovo cucciolo</tt></font></b></td> <td><center><input type=button name="bottone" value= "Auto" OnClick="javascript:automatico()"></table></form><br> <hr size=2 color=navy> <p align=center><table border=1 width=500 cellpadding=5 cellspacing=10 bgcolor=teal><caption><b><font color=red>IL MIO SECONDO ALBUM</B></caption></font><tr><td BGCOLOR=green><center><a href="javascript:apri1(MioForm1.Scelta.options.selectedIndex)"><img src="http://www.webfract.it/GUIDA/cavp.jpg" height=48 width=48 name="immagine1"></a></center> <td width=60><form name="MioForm1">  <SELECT size="5" name="Scelta" onChange="Mostra1(MioForm1.Scelta.options.selectedIndex)">  <option value="0" selected> foto 1 <option value="1"> foto 2 <option value="2"> foto 3 </option> </SELECT> <tr><td bgcolor="#E0E4E3"><font color=maroon size=3><b><tt><span id="descrivi1">Cavallo</tt></font></b></td> <td><center><input type=button name="bottone1" value= "Auto" OnClick="javascript:automatico1()"></table></form>

Torna al trucco Indice Un visualizzatore

Vuoi approfondire il linguaggio HTML?
Usa la nostra

GUIDA AL LINGUAGGIO HTML per cani, gatti e non solo!

Cerchi un argomento particolare di HTML?
Accedi all'INDICE DETTAGLIATO

Cerchi un trucco complesso?
La nostra sezione
TRUCCHI E MALIZIE
fa proprio al caso tuo!

Altrimenti, usa la ricerca di GOOGLE, magari a partire dal nostro sito!