Fare Web: iFrame in HTML

Bentornati alla nostra serie di Guide "Fare Web".
Oggi tratteremo in particolare l'iFrame, che è un elemento HTML: esso ci permette di includere file in un riquadro di un'altra pagina web.

Andiamo a creare quindi uno slider di immagini.
Apriamo un file, inseriamo questo codice, e salviamolo in .html (o .php, come preferite):

<style type="text/css">
.fadein {
width: 100%;
height: 100%px;

}
.fadein img {
position: absolute;
left:0;
top:0;
width: 100%;
height: 400px;


}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 3000);
});
</script>
<center>
<div class="fadein">
<img src="images/immagine1.jpg" alt="" class="active" />
<img src="images/immagine2.jpg" alt="" />
<img src="images/immagine3.jpg" alt="" />

</div>
</center>

Sostituiamo i valori width e height rispettivamente con la larghezza e la larghezza che preferiamo per le nostre immagini.
Sostituiamo immagine1, immagine2 ecc... con le immagini che vogliamo visualizzare nel nostro slider.

Adesso possiamo includere il nostro iFrame all'interno delle pagine web, usando questo semplice codice:

<iframe src="iframe.php" width="100" height="400" style="border: 0"; frameborder="0"; margin:0; no-repeat fixed;  scrolling="no"></iframe> 

Sostituiamo il valore di width e height rispettivamente con la larghezza e la larghezza che preferiamo per il nostro riquadro, che conterrà lo slider.

Per oggi è tutto, se avete bisogno di ulteriore aiuto, lasciate pure un commento qui sotto.