SOLUCIONES EJERCICIOS DOM HTML
Anuncio
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>
<body>
<script type="text/javascript">
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');
}
}
</script>
<a href="javascript:verificarEntrada()">Ir al peridico el pais</a>
</body>
</html>
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>
<body>
<script type="text/javascript">
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';
}
}
</script>
<a href="javascript:redireccionar()">Redireccionar a un servidor de mail</a>
</body>
</html>
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>
<body>
<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>
</body>
</html>
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>
<body>
<script type="text/javascript">
function abrirVentana()
{
var ventana=open('','','width='+ screen.availWidth +',height='+screen.availHeight/2);
}
</script>
<form>
<input type="button" value="abrir ventana" onClick="abrirVentana()">
</form>
</body></html>
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>
.caja1{height: 50px; width: 100px; position: fixed; left: 10px; top: 10px; backgroundcolor:#FF9;}
</style>
<script type="text/javascript">
function pageScroll() {
window.scrollBy(0,30);
scrolldelay = setTimeout('pageScroll()',800);
}
function stopScroll()
{
clearTimeout(scrolldelay);
}
</script>
</head>
<body>
<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>
</body>
</html>
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
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table border="0" align="center" width="42%" bgcolor="#000000" height="106">
<tr>
<td width="30%">
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>
</td>
<td width="30%">
<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>
</td>
<td width="30%">
<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>
</td>
<td width="30%">
<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>
</td>
</tr>
</table>
</body>
</html>
6
