Dans cet exemple, j'ai créé 3 balises <div>  (s'appellant respectivement fr1 , fr2 et fr3 ) contenant chacune une <iframe>.
Chaque balise est initialement rendue invisible avec la propriété style="display:none;"
Il ne reste plus ensuite qu'à jouer sur les états "visible" ou "invisible" de chacune des <div> en modifiant leur état avec les méthodes hide (cacher) et show (montrer).

En cliquant sur un bouton, on rend visible la balise correspondant et on cache les autres.

En plus de la balise <iframe> vous avez aussi appris à mettre un bouton et montrer ou cacher un élément

Code correspondant à l'exemple ci-dessus

/* Définition du second bouton*/

<p><input style="float: left; width: 194px; background-color: white;" onclick="$('fr1').hide();$('fr2').show();$('fr3').hide();" type="button" value="Asie en Vert et Bleu" /></p>
 

/* Définition du troisième bouton*/

<p><input style="float: left; width: 194px; background-color: white;" onclick="$('fr1').hide();$('fr2').hide();$('fr3').show();" type="button" value="Eklablog" /></p>

/* Définition des div*/

<div id="fr1" style="display: none;"><iframe src="http://papasti.eklablog.fr/" width="580" height="240"></iframe></div>
<div id="fr2" style="display: none;"><iframe src="http://asieenvertetbleu.eklablog.com/" width="580" height="240"></iframe></div>
<div id="fr3" style="display: none;"><iframe src="http://www.eklablog.com/" width="580" height="240"></iframe></div>