Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 15 de Diciembre 2015, 22:28
-
Hola de nuevo.
EJERCICIO
Crea una página web que muestre en el lado izquierdo tres opciones donde podrá pulsar el usuario: clarin.com, elmercurio.cl y elespectador.com. En la parte inferior izquierda, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario (por ejemplo si el usuario pulsa en elmercurio.cl en el frame que se encuentra debajo deberá mostrarse la web de elmercurio.cl). En el lado derecho estarán las opciones eluniversal.com.mx, elcomercio.pe y elmundo.es. En la parte inferior derecha, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#cabecera{text-align: center;}
.pulsador{ width: 20%;}
#pulsadorIzq{float: left;}
#pulsadorDcha{float: right;}
#contenedorFrames{width: 100%;}
li{padding:10px; width: auto; display: inline-block; margin: 10px; cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
iframe{margin:20px; padding:20px; width: 40%; height: 600px;}
.limpiador{clear:both;}
</style>
<script type="text/javascript">
function ejemplo(destino){
iframe = document.getElementsByTagName('iframe');
switch (destino){
case 1:
iframe[0].src = 'http://clarin.com';
break;
case 2:
iframe[0].src = 'http://elmercurio.cl';
break;
case 3:
iframe[0].src = 'http://elespectador.com';
break;
case 4:
iframe[1].src = 'http://eluniversal.com.mx';
break;
case 5:
iframe[1].src = 'http://elcomercio.pe';
break;
case 6:
iframe[1].src = 'http://elmundo.es';
break;
}
}
</script>
</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div id ="pulsadorIzq" class="pulsador">
<ul>
<li onclick="ejemplo(1)">clarin.com</li>
<li onclick="ejemplo(2)">elmercurio.cl</li>
<li onclick="ejemplo(3)">elespectador.com</li>
</ul>
</div>
<div id ="pulsadorDcha" class="pulsador">
<ul>
<li onclick="ejemplo(4)">eluniversal.com.mx</li>
<li onclick="ejemplo(5)">elcomercio.pe</li>
<li onclick="ejemplo(6)">elmundo.es</li>
</ul>
</div>
<div class="limpiador" id = "contenedorFrames">
<iframe name="aprende1" src="http://clarin.com" >
<p>Tu navegador no admite iframes.</p>
</iframe>
<iframe name="aprende2" src="http://eluniversal.com.mx">
<p>Tu navegador no admite iframes.</p>
</iframe>
</div>
</body>
</html>
Saludos.
-
Buenos días Pedro, lo veo todo correcto. En lugar de mostrar inicialmente algo dentro del iframe con <iframe name="aprende1" src="http://clarin.com" > podría simplemente dejarse no establecida la propiedad src con <iframe name="aprende1">, hasta que el usuario pulse en una opción, momento en que aparecería el contenido. Otra opción sería ponerle un color de fondo mientras no se haya elegido contenido, etc.
Saludos
-
Dejé los iframe sin apuntar a ninguna dirección desde su carga y añadí este código para que quedase como comentas.
window.onload = function() {
iframe = document.getElementsByTagName( "iframe" );
for (var i = 0; i < iframe.length; i++) {iframe[i].style.background = 'yellow';}
}
Saludos y gracias.
-
Perfecto,
Saludos