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: Dimitar Stefanov en 07 de Abril 2016, 13:06
-
Buenas tardes. Aquí os dejo una posible solución del ejercicio CU01172E del curso JavaScript desde cero.
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.
El código JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
border: solid;
position: relative;
float: left;
border-radius: 40px;
background-color: yellow;
font-size: 24px;
padding: 2px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].addEventListener('click',cambiarSrc);
}
}
function cambiarSrc(){
var iframes = document.getElementsByTagName('iframe');
var divs = this.id;
switch(divs){
case 'div01':
iframes[0].src = 'http://clarin.com';
break;
case 'div02':
iframes[1].src = 'http://eluniversal.com.mx';
break;
case 'div03':
iframes[0].src = 'http://elmercurio.cl';
break;
case 'div04':
iframes[1].src = 'http://elcomercio.pe';
break;
case 'div05':
iframes[0].src = 'http://elespectador.com';
break;
case 'div06':
iframes[1].src = 'http://elmundo.es';
break;
}
}
</script>
</head>
<body>
<div id="div01"><a href="#">clarin.com</a></div>
<div style="float: right" id="div02"><a href="#">eluniversal.com.mx</a></div><br><br>
<div id="div03"><a href="#">elmercurio.cl</a></div>
<div style="float: right" id="div04"><a href="#">elcomercio.pe</a></div><br><br>
<div id="div05"><a href="#">elespectador.com</a></div>
<div style="float: right" id="div06"><a href="#">elmundo.es</a></div><br><br><br>
<iframe src="" frameborder="1" width="500" height="500"></iframe>
<iframe src="" frameborder="1" style="float: right;" width="500" height="500"></iframe>
</body>
</html>
Lo que no entiendo porque en el primer iframe no se muestra el scroll de abajo.
Gracias.
-
Buenas tardes
Todo conforme a lo solicitado en el ejercicio; hay una explicación sobre por qué aparecen o no los scrolls en https://www.aprenderaprogramar.com/foros/index.php?topic=4165.0
Saludos
-
Buenas tardes, Mario.
Acabo de ver el hilo que me habías adjuntado. Por lo visto le ha pasado a más compañeros míos. Así que es según la página relacionada con el iframe y no tiene nada que ver con el código.
Gracias por corregirme el ejercicio y por la dedicación de tu tiempo.
Saludos.