SOLUCIONES EJERCICIOS DOM HTML Supongamos que tenemos un hipervínculo que al ser presionado entre al periódico El Pais, pero primero muestre una ventana de confirmación, si queremos ingresar al periódico. En caso que el visitante presione el botón afirmativo, re direccionamos al sitio de El Pais, en caso contrario mostramos un mensaje: <html><head></head> function verificarentrada() if (window.confirm('desea salir del sitio e ingresar al periódico el pais?')) window.location='http://www.elpais.com'; else window.alert('no hay problema'); <a href="javascript:verificarentrada()">ir al peridico el pais</a> 1
Confeccionar una página que tenga un hipervínculo. Cuando se presione dicho hipervínculo generar un valor aleatorio entre 0 y 2. Si se genera el 0 llamar al webmail de hotmail, si se genera un 1 llamar a gmail en caso de generarse un 2 llamar a yahoo. Para generar un valor aleatorio utilizar la función random del objeto Math. <html><head></head> function redireccionar() var num; num=math.random()*3; num=parseint(num); if (num==0) window.location='http://www.hotmail.com'; if (num==1) window.location='http://www.yahoo.com'; if (num==2) window.location='http://www.gmail.com'; <a href="javascript:redireccionar()">redireccionar a un servidor de mail</a> 2
Confeccionar una página que tenga un cuadro combinado que te permita elegir un navegador y te re direccione a el. <html> <head><title>location</title></head> <form> <!-- La propiedad self devuelve la ventana actual. --> <select onchange="if(tselectedindex!=0) self.location=this.options[this.selectedindex].value"> <option value="" selected>selecciona pagina <optihis. on value="http://www.google.com">google <option value="http://www.yahoo.com">yahoo <option value="http://www.hotmail.com">hotmail </select> </form> Confeccionar un programa que al presionar un botón aparezca una ventana que ocupe todo el ancho del monitor y la mitad de su altura. <html><head></head> function abrirventana() var ventana=open('','','width='+ screen.availwidth +',height='+screen.availheight/2); <form> <input type="button" value="abrir ventana" onclick="abrirventana()"> </form> 3
Confeccionar un programa de la página vaya desplazándose continuamente Para conseguirlo utiliza la function window.scrollby que desplaza el contenido de la ventana en un determinado número de pixeles, hacia arriba o hacia abajo según se establezca de forma positiva o negativa Combinando la function window.scrollby con settimeout se puede hacer que la página vaya desplazándose continuamente, se puede iniciar la función al cargar la página mediante el evento onload o con un vínculo/ <html> <head> <title> ScrollBy </title> <style>.caja1height: 50px; width: 100px; position: fixed; left: 10px; top: 10px; backgroundcolor:#ff9; </style> function pagescroll() window.scrollby(0,30); scrolldelay = settimeout('pagescroll()',800); function stopscroll() cleartimeout(scrolldelay); </head> <div class="caja1"> <a href="javascript:pagescroll()">scroll</a> <a href="javascript:stopscroll()">stop</a> </div> <br> <p> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, </p> <p>... </p> 4
Confeccionar un programa que se muestre varias imágenes, al presionar sobre alguna de ellas aparezca una ventana con la imagen seleccionada <html> <head> <title>pop up para fotos</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script language="javascript"> var titulopordefecto = "Perico de los palotes"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí var ventana; var cont=0; function afoto(cual,titulo) if(cont==1)ventana.close();ventana=null if(titulo==null)titulo=titulopordefecto ventana=window.open('','ventana','resizable=yes,scrollbars=no') ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onunload="opener.cont=0"><img src="' + cual + '" onload="opener.redimensionar(this.width, this.height)">'); ventana.document.close(); cont++; function redimensionar(ancho, alto) ventana.resizeto(ancho+12,alto+28); ventana.moveto((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup </head> <body bgcolor="#ffffff" text="#000000"> <table border="0" align="center" width="42%" bgcolor="#000000" height="106"> <tr> 5
<div align="center"><a href="#" onclick="afoto('imagenes/gim1.jpg','gatos en las estrellas');return false"><img src="imagenes/gim1.jpg" width="100" height="100" border="0"></a></div> <div align="center"><a href="#" onclick="afoto('imagenes/gim2.jpg');return false"><img src="imagenes/gim2.jpg" width="100" height="100" border="0"></a></div> <div align="center"><a href="#" onclick="afoto('imagenes/gim3.jpg');return false"><img src="imagenes/gim3.jpg" width="100" height="100" border="0"></a></div> <div align="center"><a href="#" onclick="afoto('imagenes/gim4.jpg');return false"><img src="imagenes/gim4.jpg" width="100" height="100" border="0"></a></div> </tr> </table> 6