iFrames

CODE

    <div id="bloke-botones">
        <!-- Navegador con cuatro botones -->
        <button onclick="mostrarIframe('iframe1')">Ventana 1</button>
        <button onclick="mostrarIframe('iframe2')">Ventana 2</button>
        <button onclick="mostrarIframe('iframe3')">Ventana 3</button>
        <button onclick="mostrarIframe('iframe4')">Ventana 4</button>
        <button id="inicio" onclick="window.location.reload()"  style="display: none;">inicio</button>
    </div>
        <iframe src="https://www.sonymage.net" style="width:48%;height: 300px;"></iframe>
        <iframe src="https://www.finca-sanpedro.es" style="width:48%;height: 300px;"></iframe>
        <iframe src="https://www.sonymage.net" style="width:48%;height: 300px;"></iframe>
        <iframe src="https://www.serviweb-garza.es" style="width:48%;height: 300px;"></iframe>
        <!-- Iframes ocultos -->
        <iframe id="iframe1" src="https://www.sonymage.net" style="width:100%;height: 700px;display: none;"></iframe>
        <iframe id="iframe2" src="https://www.finca-sanpedro.es" style="width:100%;height: 700px;display: none;"></iframe>
        <iframe id="iframe3" src="https://www.sonymage.net" style="width:100%;height: 700px;display: none;"></iframe>
        <iframe id="iframe4" src="https://www.serviweb-garza.es" style="width:100%;height: 700px;display: none;"></iframe>

<script>

   // Función para mostrar el iframe seleccionado y ocultar los demás
   function mostrarIframe(idIframe) {
   // Ocultar todos los iframes
   var iframes = document.querySelectorAll('iframe');
   for (var i = 0; i < iframes.length; i++) {
   iframes[i].style.display = 'none';
   }
   
   // Mostrar el iframe seleccionado
    var iframeSeleccionado = document.getElementById(idIframe);
    iframeSeleccionado.style.display = 'block';
	var ini = document.getElementById(inicio);
    inicio.style.display = 'block';
           
    }
    
</script>