Galleria di immagini con javascript

Si vuole ottenere una pagina web che ci consenta di fare scorrere alcune foto facendo click su 2 pulsanti.

Procuriamoci, ad esempio, 4 foto (.jpg) di dimensioni accettabili (es 500x400 pixel) e collochiamole nella cartella in cui inseriremo la pagina web e il foglio di stile.
Diamo alle foto i seguenti nomi: foto00.jpg, foto01.jpg, foto02.jpg, foto03.jpg.
Prepariamo e salviamo con il nome stile.css il seguente foglio di stile:

BODY 
{
	overflow: auto;
	font-family: Verdana;
	font-size: 9pt;
}

#foto
{
	position: absolute;
	top: 1%;
	left: 1%;
	height: 92%;
	width: 99%;
	margin:1pt;
	overflow:hidden;
}

#pulsantesx
{
	position: absolute;
	top: 93%;
	left: 5%;
	height: 6%;
	width: 5%;
}

#didascalia
{
	position: absolute;
	top: 93%;
	left: 12%;
	height: 6%;
	width: 76%;
	margin:1pt;
	font-size: 9pt;
	text-align:center;
}

#pulsantedx
{
	position: absolute;
	top: 93%;
	left: 90%;
	height: 6%;
	width: 5%;
}
Adesso prepariamo la seguente pagina e la salviamo con il nome galleria.html
<html>

<head>

<link rel="stylesheet" type="text/css" href="stile.css" />

</head>

<body onLoad="i=0;">
<div id="corpofoto">

<script language="javascript">
var foto=new Array('foto00.jpg','foto01.jpg','foto02.jpg','foto03.JPG');

var dida=new Array('descrizione foto00','descrizione foto01','descrizione foto 02','descrizione foto03');

var i=-1;
var m=4;

function avanti()
{
	if (i<m) i++; else i=0;
	f=document.getElementById('foto');
	s="<div style='text-align: center'><b>";
	s=s+"<img src='"+foto[i]+"' />";
	f.innerHTML=s;
	d=document.getElementById('didascalia');
	d.innerHTML=dida[i];	
}


function indietro()
{
	if (i>0) i--; else i=m;
	f=document.getElementById('foto');
	s="<div style='text-align: center'><b>";
	s=s+"<img src='"+foto[i]+"' /><br/>";
	f.innerHTML=s;	
	
	d=document.getElementById('didascalia');
	d.innerHTML=dida[i];	
}
</script>

<div id="foto">
<div style="text-align: center">
<b>descrizione foto00</b>
<IMG src="foto00.jpg" BORDER="0">
</div>
</div>

<form>
<div id="pulsantesx">
<input type="button" value="<<" style="color:yellow;background-color:black;" onclick="indietro();" />
</div>

<div id="didascalia">
descrizione foto00
</div>

<div id="pulsantedx">
<input type="button" value=">>"  style="color:yellow; background-color:black;" onclick="avanti();" />
</div>
</form>

</div>
</body>
</html>


Warning: include(../../../piede.php): failed to open stream: No such file or directory in D:\inetpub\webs\roccocamerait\esercitazioni\es4a\web\esercizio01.php on line 174

Warning: include(): Failed opening '../../../piede.php' for inclusion (include_path='.;C:\php\pear') in D:\inetpub\webs\roccocamerait\esercitazioni\es4a\web\esercizio01.php on line 174