Universidad de Cantabria JavaScript Fco Javier González Ortiz Directorio Tabla de Contenido Inicio Artículo Copyright c 2006 gonzaleof@unican.es Actualizado el: D.L.:SA-1415-2004 ISBN: 2.00
1. Hojas de Estilo 1.1. Dando estilo a una página 1.2. Dando estilo a varias páginas Tabla de Contenido 2. JavaScript 2.1. Introdución 2.2. Diferencias entre Java y Javascript 3. Variables y Funciones 3.1. Variables Globales y Locales 3.2. Operadores Aritméticos y Lógicos 4. Condición If...Else 5. Bucle For 6. Bucle switch 7. Objetos en javascript 7.1. Clase String 7.2. Clase Date 8. Eventos en Javascript 9. Capas en HTML
Sección 1: Hojas de Estilo 3 1. Hojas de Estilo En las páginas web se mezcla en su código HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del código HTML se hace pesada y difícil a la hora de buscar errores o depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que estos textos estén mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad. En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico para que en pocos capítulos podáis usar las CSS de una manera depurada. No pretendemos explorar todos los aspectos de la tecnología ya que para realizar esto necesitaríamos la extensión de un libro entero. El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, el diseño de presentación que se puede aplicar a: Un sitio web entero, de modo que se puede definir su estilo de una sola vez. Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página. Una porción del documento, aplicando estilos visibles en un trozo de la página. Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación.
Sección 1: Hojas de Estilo 4 Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos... 1.1. Dando estilo a una página <head> <title>ejemplo de estilos para toda una página</title> <STYLE type="text/css"> <!-- H1 {text-decoration: underline; text-align:center P {font-family:arial,verdana; color: white; background-color: black BODY {color:black;background-color: #cccccc; text-indent:1cm A:link {text-decoration:none;color:#ffffff; A:visited {text-decoration:none;color:#ffcc33; A:active {text-decoration:none;color:#ffffff; A:hover {text-decoration:underline;color:#ffff00;font-weight:bold // --> </STYLE> </head>
Sección 1: Hojas de Estilo 5 1.2. Dando estilo a varias páginas Guardar este contenido en un fichero nombre.css P { font-size : 12pt; font-family : arial,helvetica; % font-weight:normal; H1 { font-size : 36pt; font-family : verdana,arial;% text-decoration : underline; text-align : center;% background-color: Teal; TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666; BODY { background-color : #006600; font-family : arial; color : White; incluir en la cabecera de un documento nuevo la etiqueta <link rel=stylesheet type= text/css href= estilomio.css >
Sección 1: Hojas de Estilo 6 Nombre del Posibles valores Ejemplos atributo FUENTES - FONT color valor RGB color: #009900 color: red; font-size xx-small x-small small medium large x-large xx-large Unidades de CSS font-size:12pt; font-size: x- large; font-family serif sans-serif cursive fantasy monospace Todas las fuentes habituales font-weight normal-bold -bolde -lighter- 100-200-300-400 -500-600 - 700-800 - 900 fontfamily:arial,helvetica; font-size: fantasy; font-weight:bold;fontweight: 200; font-style normal italic oblique font-style:normal; fontstyle: italic;
Sección 1: Hojas de Estilo 7 Nombre del Posibles valores Ejemplos atributo PÁRRAFOS - TEXT line-height normal y unidades CSS line-height: 12px; lineheight: normal; textdecoratiothrough none ;underline; overline ; line- text-decoration: none; text-decoration: under- line; text-align left right center justify text-align: right; textalign: center; text-indent Unidades CSS text-indent: 10px;textindent: 2in; texttransform capitalize uppercase lowercase none text-transform: none;
Sección 1: Hojas de Estilo 8 Nombre del Posibles valores Ejemplos atributo BOX - CAJA Margin-left Unidades CSS margin-left: 1cm; margin-left: 0,5in; Margin-right Unidades CSS margin-right: 5margin-right: 1in; Margin-top Unidades CSS margin-top: 0px; margin-top: 10px; Margin-bottom Unidades CSS margin-bottom: 0pt; margin-top: 1px; Padding-left Unidades CSS Padding-right Padding-top Padding-bottom Border-color border-width Unidades CSS Unidades CSS Unidades CSS Codigo RGB Unidades CSS
Sección 2: JavaScript 9 2. JavaScript 2.1. Introdución Netscape, después de hacer sus navegadores compatibles con los applets, comenzó a desarrollar un lenguaje de programación al que llamó LiveScript que permitiese crear pequeños programas en las páginas y que fuese mucho más sencillo de utilizar que Java. De modo que el primer Javascript se llamo LiveScript, pero no duró mucho ese nombre, pues antes de lanzar la primera versión del producto se forjó una alianza con Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje. La alianza hizo que Javascript se diseñara como un hermano pequeño de Java, solamente útil dentro de las páginas web y mucho más fácil de utilizar, de modo que cualquier persona, sin conocimientos de programación pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Además, para programar Javascript no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al código HTML, como ocurría con los applets.
Sección 2: JavaScript 10 2.2. Diferencias entre Java y Javascript Queremos que quede claro que Javascript no tiene nada que ver con Java, salvo en sus orígenes, como se ha podido leer hace unas líneas. Actualmente son productos totalmente distintos y no guardan entre si más relación que la sintaxis idéntica y poco más. Algunas diferencias entre estos dos lenguajes son las siguientes: Compilador. Para programar en Java necesitamos un Kit de desarrollo y un compilador. Sin embargo, Javascript no es un lenguaje que necesite que sus programas se compilen, sino que éstos se interpretan por parte del navegador cuando éste lee la página. Orientado a objetos. Java es un lenguaje de programación orientado a objetos. (Más tarde veremos que quiere decir orientado a objetos, para el que no lo sepa todavía) Javascript no es orientado a objetos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programación estructurada como C o Pascal. Propósito. Java es mucho más potente que Javascript, esto es debido a que Java es un lenguaje de propósito general, con el que se pueden hacer aplicaciones de lo más variado, sin embargo, con Javascript sólo podemos escribir programas para que se ejecuten en páginas web.
Sección 3: Variables y Funciones 11 3. Variables y Funciones 1. Números.Para empezar tenemos el tipo numérico, para guardar números como 9 o 23.6 var num1 = 23 var num2 = 33 var rio = new Array(); rio[0]="rios"; rio[1]="adaja";rio[2]="alagon";rio[3]="alberche";rio[4]="almanzora"; 2. Cadenas. El tipo cadena de carácter guarda un texto. Siempre que escribamos una cadena de caracteres debemos utilizar las comillas ( ). var nombre = "Javier" var tema = "Java" 3. Boleanos.También contamos con el tipo boleano, que guarda una información que puede valer si (true) o no (false). function nombre (parametros) { Sentencias...
Sección 3: Variables y Funciones 12 Ejemplo Manejo de variables y funciones con formularios <html> <head> <title>var1</title> <!-- START OF SCRIPT --> <SCRIPT LANGUAGE="JAVASCRIPT"> function cuadrado(numero) { return numero * numero; </SCRIPT> <!-- END OF SCRIPT --> </head> <body bgcolor="#990000"> % <form >% <input name="entra" type="text" value="0">% <input name="sale" type="text" value="">% <input type="button" value="x^2" onclick="sale.value=cuadrado(entra.value)"> % </form> </body> Diseñar una calculadora conversora de euros
Sección 3: Variables y Funciones 13 Ejemplo Escribiendo resultados de variables y funciones con alert() <SCRIPT LANGUAGE="JAVASCRIPT"> var resul=0; function square(number) { resul= number * number; </SCRIPT> <!-- FIN SCRIPT --> </head> <body bgcolor="#990000"> <form> <input name="entra" type="float" value="2"> <input type="button" value="x^2" onclick="eval(square(this.form.entra.value)); alert(resul)"> </form> </body>
Sección 3: Variables y Funciones 14 Ejemplo Escribiendo resultados de variables en formularios <SCRIPT> function Mostrar(formul){ var sel=formul.losrios.selectedindex; var name=formul.losrios.options[sel].text; formul.indice.value=sel; formul.nombre.value=name; </SCRIPT> </head> <body bgcolor="#ccffff"> <FORM> Numero de la Lista <br> <input name="indice" type="text" value=""> <br> Nombre de Rio <br> <input name="nombre" type="text" value=""> <br> <select name="losrios" size=23 style="background-color:#ffff99" onchange="mostrar(this.form);"> <option selected>rios <option> Adaja <option> Alagón <option> Alberche <option> Almanzora <option> Andarax <option> Aragón <option> Bidasoa <option> Besaya <option> Cinca <option> Deva <option> Duero <option> Ebro <option> Eo <option> Eresma <option> Esla <option> Eume <option> Gallego <option> Genil <option> Guadalimar <option> Guadalorce <option> Guadiana <option> Guadiana manor <option> Guadiato <option>gualdalquivir
Sección 3: Variables y Funciones 15 </select> </FORM>
Sección 3: Variables y Funciones 16 Ejemplo Escribiendo resultados de variables y funciones en el document <html> <head> <title>strings_1</title> <!-- INICIO SCRIPT --> <SCRIPT LANGUAGE="JAVASCRIPT"> num = [1,2,3,4,5,6,7,8,9 ]; var NumerodeTabla; NumerodeTabla=prompt("Quieres la tabla de SUMAR del número?","0"); document.write("<strong> <H1>TABLA de SUMAR del\t"+ NumerodeTabla+"</H1></strong> <hr>"); document.write(numerodetabla+"+\t"+num[0]+"\t = \t"+ eval(eval(numerodetabla)+num[0])+"<br>"); document.write(numerodetabla+"+\t"+num[1]+"\t = \t"+ eval(eval(numerodetabla)+num[1])+"<br>"); document.write(numerodetabla+"+\t"+num[2]+"\t = \t"+ eval(eval(numerodetabla)+num[2])+"<br>"); document.write(numerodetabla+"+\t"+num[3]+"\t = \t"+ eval(eval(numerodetabla)+num[3])+"<br>"); </SCRIPT> </head> <body>
Sección 3: Variables y Funciones 17 </body> </html>
Sección 3: Variables y Funciones 18 3.1. Variables Globales y Locales Ejemplo Controlando el ámbito de las Variables <html> <head> <title>var3</title> <SCRIPT LANGUAGE="JAVASCRIPT"> var variable="soy GLOBAL"; function VarGlobal() { alert(variable); function VarLocal() { variable="soy LOCAL"; alert(variable); </SCRIPT> </head> <body> <input type="button" value="muestra Global" onclick="varglobal()"> <input type="button" value="muestra Local" onclick="varlocal()"> </body> </html>
Sección 3: Variables y Funciones 19 3.2. Operadores Aritméticos y Lógicos Ejemplo Operadores aritméticos <html> <head> <title>var3</title> </head> <body> Numero <form> <input type="text" name="entra" value=1> <br> <input type="button" value="x+=2" onclick="entra.value+=2"> <input type="button" value="x -= 1" onclick="entra.value-=1"> <input type="button" value="x *= 2" onclick="entra.value*=2"> <input type="button" value="x /= 3" onclick="entra.value/=3"> <input type="button" value="x mod 5" onclick="entra.value%= 5"> <input type="button" value="inicio" onclick="entra.value=1"> </form> </body> </html> x+ = y x = x + y x = y x = x y x = y x = x y x/ = y x = x/y == igualdad! = desigualdad > mayor < menor
Sección 4: Condición If...Else 20 4. Condición If...Else if (condition) { Sentencias... else { Sentencias... <html> <head> <title>ifelse</title> <!-- INICIO SCRIPT --> <SCRIPT LANGUAGE="JAVASCRIPT"> function Nota(a,b) { var media=(parseint(a)+parseint(b))/2; var final=""; if (media<5) {final="suspenso"; else { final="aprobado"; document.notas.calificar.value=final; return final; </SCRIPT> </head> <body> <form name="notas"> "HTML" <input type="text" name="html" value=""><br> "JavaScript "<input type="text" name="js" value=""> <br> <input type="button" name="java" value="calificación" onclick="nota(html.value,js.value)"> <input type="text" name="calificar"> </form>
Sección 4: Condición If...Else 21 </body> </html>
Sección 5: Bucle For 22 5. Bucle For for (var i=inicio; i < final; i++) { sentencias; <html> <head> <title>for_2</title> <SCRIPT> function TablaSumar(num) { for (var i=1; i < 11; i++) { document.writeln(i+"+\t"+num+"\t =\t "+eval(i+eval(num))+"<br>"); num=prompt("quieres la tabla de SUMAR del número?","0"); TablaSumar(num); </SCRIPT> </head> <body> </body> </html>
Sección 6: Bucle switch 23 6. Bucle switch switch (expresion ) { case valor1: sentencias; break; case valor2: sentencias; break; default: sentencias; Ejercicio: Generar de forma aleatoria una quiniela de 15 resultados con 1, X 2. <SCRIPT LANGUAGE="JAVASCRIPT"> var rellenar="";var resultado=""; for (var i=1; i < 16; i++) { casilla=math.floor(3*math.random())+1; switch (casilla) { case 1: rellenar="1"; break; case 2: rellenar="x"; break; case 3: rellenar="2"; break; default: resultado=resultado+"casilla \t\t\t"+i+ +"=\t"+rellenar+"<br>" document.write(resultado); </SCRIPT> </head> 2
Sección 7: Objetos en javascript 24 7. Objetos en javascript String, para el trabajo con cadenas de caracteres. Date, para el trabajo con fechas. Math, para realizar funciones matemáticas. Number, para realizar algunas cosas con números Boolean, trabajo con boleanos.
Sección 7: Objetos en javascript 25 7.1. Clase String Metodos de los string Length charat(indice) indexof(carácter,desde) lastindexof(carácter,desde) substring(inicio,fin) tolowercase() touppercase() número de caracteres del String. Devuelve el carácter que hay en la posición indicada como índice. Devuelve la posición de la primera vez que aparece el carácter indicado por parámetro en un string. El segundo parámetro es opcional y sirve para indicar a partir de que posición empieza la búsqueda. igual que la función indexof pero desde el final en lugar del principio. Devuelve el substring que empieza en el carácter de inicio y termina en el carácter de fin. Pone todas los caracteres de un string en minúsculas. Pone todas los caracteres de un string en mayúsculas.
Sección 7: Objetos en javascript 26 Ejemplo Escribiendo resultados de variables y funciones en el document <html> <head> <title>for_2</title> <SCRIPT LANGUAGE="JAVASCRIPT"> var mistring = "Hola ALUMNOS" var result = "" for (i=0;i<mistring.length-1;i++) { result += mistring.charat(i) result += "-" result += mistring.charat(mistring.length - 1) document.write("<h2>"+result+"</h2>") </SCRIPT> </head> <body > </body> </html>
Sección 7: Objetos en javascript 27 7.2. Clase Date Sobre este objeto recae todo el trabajo con fechas en Javascript, como obtener una fecha, el día la hora y otras cosas. Para trabajar con fechas necesitamos instanciar un objeto de la clase Date y con él ya podemos realizar las operaciones que necesitemos. Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado podemos crear el objeto con el día y hora actuales y por otro podemos crearlo con un día y hora distintos a los actuales. Esto depende de los parámetros que pasemos al construir los objetos. Para crear un objeto fecha con el día y hora actuales colocamos los paréntesis vacíos al llamar al constructor de la clase Date. mifecha = new Date() Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el momento con que inicializar el objeto. Hay varias maneras de expresar un día y hora válidas, por eso podemos construir una fecha guiándonos por varios esquemas. Estos son dos de ellos, suficientes para crear todo tipo de fechas y horas. mifecha = new Date(año,mes,dia,hora,minutos,segundos) mifecha = new Date(año,mes,dia) Los valores que debe recibir el constructor son siempre numéricos. Un detalle, el mes comienza por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.
Sección 7: Objetos en javascript 28 Metodos de Date getdate() Devuelve el día del mes. getday() Devuelve el día de la semana gethours() Retorna la hora. getminutes() Devuelve los minutos. getmonth() Devuelve el mes (atención al mes que empieza por 0). getseconds() vuelve los segundos. setdate() Actualiza el día del mes. sethours() Actualiza la hora. setminutes() Cambia los minutos. setmonth() Cambia el mes (atención al mes que empieza por 0)
Sección 7: Objetos en javascript 29 Ejemplo Mostrando la hora <title>reloj</title> <link rel="stylesheet" href="../estilo.css" type="text/css"> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- function JSClock() {--> var time = new Date() var hour = time.gethours() var minute = time.getminutes() var second = time.getseconds() var temp = "" + ((hour > 12)? hour - 12 : hour) temp += ((minute < 10)? ":0" : ":") + minute temp += ((second < 10)? ":0" : ":") + second temp += (hour >= 12)? " P.M." : " A.M." document.write( temp) <!-- </SCRIPT> </head> <body > </body>
Sección 8: Eventos en Javascript 30 8. Eventos en Javascript Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute sólo cuando suceda algo extraño deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen así: <A HREF=http://home.netscape.com. o nmouseover= MiFuncion() En los manejadores de eventos se tiene que especificar la jerarquía entera de objetos del navegador, empezando siempre por el objeto window. Evento Descripción Elementos que lo admiten onload Terminar de cargarse una página <BODY...> <FRAMESET...> % onunload Salir de una página (descargarla) <BODY...><FRAMESET...> onmouseover Pasar el ratón por encima <A HREF..> <AREA...> onmousedown cuando el usuario pulsa el botón onmouseout Que el ratón deje de estar encima <A HREF..> <AREA...> % onsubmit Enviar un formulario <FORM...> onclick Pulsar un elemento <INPUT TYPE="button, % checkbox, link, radio"...> onblur Perder el cursor <INPUT TYPE="text"...> <TEXTAREA...> onchange Cambiar de contenido o perder el cursor <INPUT TYPE="text"...> onfocus Conseguir el cursor <INPUT TYPE="text"...>
Sección 8: Eventos en Javascript 31 onselect Seleccionar texto <INPUT TYPE="text"...>
Sección 8: Eventos en Javascript 32 Capturar las coordenadas en el document <script > ie = (document.all)? 1:0 n6 = (document.getelementbyid)? 1:0 var ie5 = (document.getelementbyid && document.all); var ns6 = (document.getelementbyid &&!document.all); function RatonXY(e){ Xpos= (ie5)?event.x:(ns6)?clientx=e.clientx:false; Ypos= (ie5)?event.y:(ns6)?clienty=e.clienty:false; document.coor.x.value=xpos; document.coor.y.value=ypos; document.onmousemove= RatonXY; </script> </head> <body> <form name="coor"> Coordeanada X <input name="x" size=5 type="text" value=""> Coordeanada Y <input name="y" size=5 type="text" value=""> </form> </body>
Sección 8: Eventos en Javascript 33 Uso del evento para diseñar un MAP de imagenes Añadimos al script anterior las dos funciones siguientes: function trackmouse(e){ Xpos= (ie5)?event.x:(ns6)?clientx=e.clientx:false; Ypos= (ie5)?event.y:(ns6)?clienty=e.clienty:false; if (Ypos>0) {x = x+, + eval(xpos-20) +, + eval(ypos-60); return x; function Poner(form){ form.coor.value = x; document.onclick= trackmouse; </script> <body> <FORM> <input type="button" value="a~nadir" onclick="poner(this.form)"> Marca la region a limitar <input name="coor" size=40 type="text" value=""> </FORM> Utilizar el script completo anterior para mapear la imagen siguiente
Sección 9: Capas en HTML 34 9. Capas en HTML Una capa es una división, una parte de la página, que tiene un comportamiento muy independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos más comunes del DHTML.. Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para hacer capas preferentemente a las otras dos.
Sección 9: Capas en HTML 35 Control de CAPAS / DIV Obtener una referencia al objeto DIV var capa=document.getelementbyid( idcapa ); [IE>5 / NS>6] Hacer visible/invisible una CAPA [IE>5 / NS>6] var capa=document.getelementbyid( idcapa ); var capa=document.getelementbyid( idcapa ); capa.style.visibility=visible ; // La hace visible capa.style.visibility=hidden ; // La hace invisible Cambiar dinámicamente el contenido HTML de una CAPA [IE>5 / NS>6] var capa=document.getelementbyid( idcapa ); capa.innerhtml=hola ; Modificar la posición del scroll de una CAPA [IE>5 / NS>6] var capa=document.getelementbyid( idcapa ); capa.scrolltop=0;
Sección 9: Capas en HTML 36 Atributos de las Capas position Puede tener dos valores, relative o absolute. top distancia en vertical donde se colocará la capa left indica la distancia en horizontal. height el tamaño de la capa en vertical, es decir, su altura width ndica la anchura de la capa. visibility si la capa se puede ver en la página o permanece oculta al usuario. z-index posición sobre el eje z que tendrán las distintas capas de la página. clip sirve para recortar determinadas áreas de la capa rect (<top>, <right>, <bottom>, <left>)
Sección 9: Capas en HTML 37 Diseño de capas <STYLE TYPE="text/css"> #capa1 {position:relative; top:50px; left:15px; background-color:#ffff99; border-width:1; border-color:#cc00ee; width:200px;z-index=5; </STYLE> </head> <body> <DIV ID=capa1> <H1>CAPA 1</H1> <P>Esto es una capa</p> <P>El contenido puede ser texto</p> <P>Graficos o incluso otra pagina web</p> </DIV>
Sección 9: Capas en HTML 38 Capas con Texto <SCRIPT LANGUAGE="JavaScript"> n = (document.layers)? 1:0 ie = (document.all)? 1:0 n6 = (document.getelementbyid)? 1:0 </SCRIPT> <link rel="stylesheet" href="estilomio.css" type="text/css"> <STYLE TYPE="text/css"> #layer1 {position:absolute; top:120px; left:205px; background-color:#ffff99; border-width:1; border-color:#cc00ee; width:200px;z-index=1; </STYLE> </head> <body> <h2> Algunas capas diferentes</h2> <br> <DIV ID=layer1> <H1>Capa 1</H1> <P>Esto es una capa</p> <P>Encima de otra</p> <P> </P> </DIV>
Sección 9: Capas en HTML 39 <DIV STYLE="position:absolute; top:100px; left:25px; background-color:#ffcc00; border-width:20px; border-style:ridge; border-color:#990000; padding:5% width:200;"> <H2>Capa 1</H2> <P>Esto es otra capa</p> <P >por debajo de la capa 2.</P> </DIV> </body>
Sección 9: Capas en HTML 40 Capas con Imagen-Ocultar y Mostrar <SCRIPT LANGUAGE="JavaScript"> ie = (document.all)? 1:0; n6 = (document.getelementbyid)? 1:0 function Mostrar() { if (n6) document.getelementbyid( uno ).style.visibility = if (ie) uno.style.visibility = "visible" "visible" function Ocultar() { if (n6) document.getelementbyid( uno ).style.visibility = "hidden" if (ie) uno.style.visibility = "hidden" </SCRIPT>
Sección 9: Capas en HTML 41 <SCRIPT LANGUAGE="JavaScript"><!-- n = (document.layers)? 1:0 ie = (document.all)? 1:0 n6 = (document.getelementbyid)? 1:0 Capas con un documento function carga(page) { if (n) document.textframe.src = page if (ie) textframe.document.location = page if (n6) document.getelementbyid( textframe ).src=page function show() { if (n) document.textn.visibility = "show" if (n6) document.getelementbyid( uno ).style.visibility = if (ie) uno.style.visibility = "visible" function hide() { if (n) document.uno.visibility = "hide" if (n6) document.getelementbyid( uno ).style.visibility = "hidden" if (ie) uno.style.visibility = "hidden" //--> "visible"
Sección 9: Capas en HTML 42 </SCRIPT> <link rel="stylesheet" href="estilomio.css" type="text/css"> <STYLE TYPE="text/css"> #uno {position:absolute; top:80px; left:155px;background-color:#ffffff; border-width:0; border-color:#990000; width:200px;height:100px; </STYLE> </head> <BODY onload=hide()> <A HREF="javascript:show()"><H2>muestra la pagina 1 </H2></A><br> <DIV ID="uno"> <A HREF="javascript:hide()"> <IFRAME SRC="capa1.html" ID="textframe" SCROLLING="yes" WIDTH="400" HEIGHT="200" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" onclick=hide()> </A> </DIV>
Sección 9: Capas en HTML 43 <SCRIPT LANGUAGE="JavaScript"> Capas con Movimiento var sufijo; objectleftpos = 0; objecttoppos = 0; n = (document.layers)? 1:0 ie = (document.all)? 1:0 n6 = (document.getelementbyid)? 1:0 function moveright() { if (document.all) {object = layer1.style if (document.layers) {object = document.layer1 else if (document.getelementbyid) { object = document.getelementbyid( layer1 ).style if (objectleftpos < 650) { objectleftpos += 10; object.left = objectleftpos; settimeout("moveright()",10) </SCRIPT>
Sección 9: Capas en HTML 44 <STYLE TYPE="text/css"> #layer1 {position:relative; top:50px; left:15px; background-color:#ffff99; border-width:1; border-color:#cc00ee; width:200px;z-index=0; </STYLE> </head> <body> Para mover una CAPA <br> <input type="button" value="pulsa" onclick="moveright()"> <DIV ID=layer1 > <img src="imalit/corredor.gif" width="114" height="134" alt="" border="0"> </DIV>