Codifica ogni tag d' immagine col suo link, entro un proprio DIV al quale assegnerai diverso ID ciascuno; il primo DIV è display: block; ed è subito visibile, gli altri due sono a display: none; e una funzione JavaScript muterà il loro stato da none a block, da block a none ecc.
Tutti e tre, occupano quindi lo spazio di uno solo, uno spazio condiviso che prevederai nella pagina.
Ecco un modello, poi semmai domani te lo spiego meglio.
L' avvicendamento dei DIV avviene ora ogni 3 secondi, in base al numero 3000 che vedi nel setTimeout (è un timer); portalo a 5000 o 10000 (viene espresso in milli-secondi).
Essenziale che ci sia un comando che attiva la prima funzione JavaScript avviando la sequenza; qui è rappresentato dal gestore d' evento onLoad associato al Tag BODYcodice:<html> <head><title>Rotating DIVs</title> <script type="text/javascript"> var which = 1; function turn(){ document.getElementById("group"+which+"").style.display="block"; setTimeout('change();', 3000); } function change(){ document.getElementById("group"+which+"").style.display="none"; if(which<3){ which ++; } else { which = 1; }; turn(); } </script> </head> <body bgcolor="#ff9090" onload="turn();"> <div align="center"> <div id="group1" style="display: block;"> [img]images/photo01.jpg[/img] </div> <div id="group2" style="display: none;"> [img]images/photo02.jpg[/img] </div> <div id="group3" style="display: none;"> [img]images/photo03.jpg[/img] </div> </div> </body> </html>
<body bgcolor="#ff9090" onload="turn();">