universidad de cantabria javascripttabla de contenido 1. hojas de estilo 1.1. dando estilo a una...
TRANSCRIPT
Universidad de Cantabria
JavaScript
Fco Javier Gonzalez Ortiz
DirectorioTabla de ContenidoInicio Artıculo
Copyright c© 2006 [email protected] el: D.L.:SA-1415-2004 ISBN: 2.00
Tabla de Contenido
1. Hojas de Estilo1.1. Dando estilo a una pagina1.2. Dando estilo a varias paginas
2. JavaScript2.1. Introducion2.2. Diferencias entre Java y Javascript
3. Variables y Funciones3.1. Variables Globales y Locales3.2. Operadores Aritmeticos y Logicos
4. Condicion If...Else
5. Bucle For
6. Bucle switch
7. Objetos en javascript7.1. Clase String7.2. Clase Date
8. Eventos en Javascript
9. Capas en HTML
Seccion 1: Hojas de Estilo 3
1. Hojas de Estilo
En las paginas web se mezcla en su codigo HTML el contenido del documento con lasetiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura delcodigo HTML se hace pesada y difıcil a la hora de buscar errores o depurar las paginas.Aunque, desde el punto de vista de la riqueza de la informacion y la utilidad de las paginasa la hora de almacenar su contenido, es un gran problema que estos textos esten mezcladoscon etiquetas incrustadas para dar forma a estos: se degrada su utilidad.
En estas paginas de CSS pretendemos dar a conocer la tecnologıa con un enfoque practicopara que en pocos capıtulos podais usar las CSS de una manera depurada. No pretendemosexplorar todos los aspectos de la tecnologıa ya que para realizar esto necesitarıamos laextension de un libro entero.
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial,el diseno de presentacion 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 pagina, se puede definir la forma, en un pequeno trozo decodigo en la cabecera, a toda la pagina. Una porcion del documento, aplicando estilosvisibles en un trozo de la pagina.
Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentespara una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestraprogramacion.
Seccion 1: Hojas de Estilo 4
Podemos definir, por ejemplo, varios tipos de parrafos: en rojo, en azul, con margenes,sin ellos...
1.1. Dando estilo a una pagina
<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>
Seccion 1: Hojas de Estilo 5
1.2. Dando estilo a varias paginas
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”>
Seccion 1: Hojas de Estilo 6
Nombre delatributo
Posibles valores Ejemplos
FUENTES - FONTcolor 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 lasfuentes habituales
font-family:arial,helvetica;font-size: fantasy;
font-weight normal-bold -bolde -lighter- 100- 200-300- 400 -500 -600 - 700 -800 - 900
font-weight:bold;font-weight: 200;
font-style normal — italic — oblique font-style:normal; font-style: italic;
Seccion 1: Hojas de Estilo 7
Nombre delatributo
Posibles valores Ejemplos
PARRAFOS - TEXTline-height normal y unidades CSS line-height: 12px; line-
height: normal;text-decoration
none ;underline; overline ; line-through
text-decoration: none;text-decoration: under-line;
text-align left — right — center — justify text-align: right; text-align: center;
text-indent Unidades CSS text-indent: 10px;text-indent: 2in;
text-transform
capitalize — uppercase — lower-case — none
text-transform: none;
Seccion 1: Hojas de Estilo 8
Nombre delatributo
Posibles valores Ejemplos
BOX - CAJAMargin-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 Unidades CSS
Padding-top Unidades CSS
Padding-bottom Unidades CSS
Border-color Codigo RGB
border-width Unidades CSS
Seccion 2: JavaScript 9
2. JavaScript
2.1. Introducion
Netscape, despues de hacer sus navegadores compatibles con los applets, comenzo a de-sarrollar un lenguaje de programacion al que llamo LiveScript que permitiese crear pequenosprogramas en las paginas y que fuese mucho mas sencillo de utilizar que Java. De modo queel primer Javascript se llamo LiveScript, pero no duro mucho ese nombre, pues antes delanzar la primera version del producto se forjo una alianza con Sun Microsystems, creadorde Java, para desarrollar en conjunto ese nuevo lenguaje.
La alianza hizo que Javascript se disenara como un hermano pequeno de Java, solamenteutil dentro de las paginas web y mucho mas facil de utilizar, de modo que cualquier persona,sin conocimientos de programacion pudiese adentrase en el lenguaje y utilizarlo a sus anchas.Ademas, para programar Javascript no es necesario un kit de desarrollo, ni compilar losscripts, ni realizarlos en ficheros externos al codigo HTML, como ocurrıa con los applets.
Seccion 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 susorıgenes, como se ha podido leer hace unas lıneas. Actualmente son productos totalmentedistintos y no guardan entre si mas relacion que la sintaxis identica y poco mas. Algunasdiferencias entre estos dos lenguajes son las siguientes:
Compilador. Para programar en Java necesitamos un Kit de desarrollo y un com-pilador. Sin embargo, Javascript no es un lenguaje que necesite que sus programasse compilen, sino que estos se interpretan por parte del navegador cuando este lee lapagina.
Orientado a objetos. Java es un lenguaje de programacion orientado a objetos.(Mas tarde veremos que quiere decir orientado a objetos, para el que no lo sepa to-davıa) Javascript no es orientado a objetos, esto quiere decir que podremos programarsin necesidad de crear clases, tal como se realiza en los lenguajes de programacionestructurada como C o Pascal.
Proposito. Java es mucho mas potente que Javascript, esto es debido a que Java esun lenguaje de proposito general, con el que se pueden hacer aplicaciones de lo masvariado, sin embargo, con Javascript solo podemos escribir programas para que seejecuten en paginas web.
Seccion 3: Variables y Funciones 11
3. Variables y Funciones
1. Numeros.Para empezar tenemos el tipo numerico, para guardar numeros como 9 o23.6
var num1 = 23var num2 = 33var rio = new Array();rio[0]="rios";rio[1]="adaja";rio[2]="alagon";rio[3]="alberche";rio[4]="almanzora";
2. Cadenas. El tipo cadena de caracter guarda un texto. Siempre que escribamos unacadena de caracteres debemos utilizar las comillas (”).
var nombre = "Javier"var tema = "Java"
3. Boleanos.Tambien contamos con el tipo boleano, que guarda una informacion quepuede valer si (true) o no (false).
function nombre (parametros) {Sentencias....
}
Seccion 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>
Disenar una calculadora conversora de euros
Seccion 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>
Seccion 3: Variables y Funciones 14�
�Ejemplo Escribiendo resultados de variables en formularios
<SCRIPT> function Mostrar(formul){ varsel=formul.losrios.selectedIndex; varname=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> Alagon <option> Alberche <option>Almanzora <option> Andarax <option> Aragon <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
Seccion 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 numero?","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>
Seccion 3: Variables y Funciones 18
3.1. Variables Globales y Locales
�
�Ejemplo Controlando el ambito 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>
Seccion 3: Variables y Funciones 19
3.2. Operadores Aritmeticos y Logicos
�
�Ejemplo Operadores aritmeticos
<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 + yx− = y x = x− yx∗ = y x = x ∗ yx/ = y x = x/y
== igualdad! = desigualdad> mayor< menor
Seccion 4: Condicion If...Else 20
4. Condicion 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="Calificacion" onclick="Nota(Html.value,JS.value)">
<input type="text" name="Calificar">
</form>
Seccion 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 numero?","0");
TablaSumar(num);
</SCRIPT>
</head>
<body>
</body>
</html>
Seccion 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”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>
Seccion 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 matematicas.
Number, para realizar algunas cosas con numeros
Boolean, trabajo con boleanos.
Seccion 7: Objetos en javascript 25
7.1. Clase String
Metodos de los stringLength numero de caracteres del String.charAt(indice) Devuelve el caracter que hay en la posicion indicada
como ındice.indexOf(caracter,desde) Devuelve la posicion de la primera vez que aparece
el caracter indicado por parametro en un string.El segundo parametro es opcional y sirve para indicara partir de que posicion empieza la busqueda.
lastIndexOf(caracter,desde) igual que la funcion indexOf pero desde el finalen lugar del principio.
substring(inicio,fin) Devuelve el substring que empieza en el caracterde inicio y termina en el caracter de fin.
toLowerCase() Pone todas los caracteres de un string en minusculas.toUpperCase() Pone todas los caracteres de un string en mayusculas.
Seccion 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>
Seccion 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 laclase Date y con el ya podemos realizar las operaciones que necesitemos.
Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado pode-mos crear el objeto con el dıa y hora actuales y por otro podemos crearlo con un dıa y horadistintos a los actuales. Esto depende de los parametros que pasemos al construir los objetos.
Para crear un objeto fecha con el dıa y hora actuales colocamos los parentesis vacıos alllamar 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 parentesis el momento con que inicializar el objeto. Hay varias maneras de expresarun dıa y hora validas, por eso podemos construir una fecha guiandonos por varios esquemas.Estos son dos de ellos, suficientes para crear todo tipo de fechas y horas.
miFecha = new Date(ano,mes,dia,hora,minutos,segundos)miFecha = new Date(ano,mes,dia)Los valores que debe recibir el constructor son siempre numericos. Un detalle, el mes
comienza por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se creacon hora 00:00:00.
Seccion 7: Objetos en javascript 28
Metodos de DategetDate() Devuelve el dıa del mes.getDay() Devuelve el dıa de la semanagetHours() Retorna la hora.getMinutes() Devuelve los minutos.getMonth() Devuelve el mes (atencion 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 (atencion al mes que empieza por 0)
Seccion 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" : ":") + minutetemp += ((second < 10) ? ":0" : ":") + secondtemp += (hour >= 12) ? " P.M." : " A.M."document.write( temp)
<!--}</SCRIPT></head>
<body ></body>
Seccion 8: Eventos en Javascript 30
8. Eventos en Javascript
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutinanuestra se ejecute solo cuando suceda algo extrano deberemos llamarla desde un controladorde eventos. Estos controladores se asocian a un elemento HTML y se incluyen ası:
<A HREF=http://home.netscape.com.onMouseOver=”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 Descripcion Elementos que lo admitenonLoad Terminar de cargarse una pagina <BODY...>
<FRAMESET...> %onUnLoad Salir de una pagina (descargarla) <BODY...><FRAMESET...>onMouseOver Pasar el raton por encima <A HREF..>
<AREA...>onmousedown cuando el usuario pulsa el boton
onMouseOut Que el raton 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"...>
Seccion 8: Eventos en Javascript 32
Capturar las coordenadas en el document
<script >ie = (document.all) ? 1:0n6 = (document.getElementById) ? 1:0var 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>
Seccion 8: Eventos en Javascript 33
Uso del evento para disenar un MAP de imagenesAnadimos 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
Seccion 9: Capas en HTML 34
9. Capas en HTML
Una capa es una division, una parte de la pagina, que tiene un comportamiento muyindependiente dentro de la ventana del navegador, ya que la podemos colocar en cualquierparte de la misma y la podremos mover por ella independientemente, por poner dos ejemp-los. En el uso de capas se basan muchos de los efectos mas comunes del DHTML. .
Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas noson compatibles mas que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV>para hacer capas preferentemente a las otras dos.
Seccion 9: Capas en HTML 35
Control de CAPAS / DIVObtener una referencia al objeto DIVvar 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 dinamicamente el contenido HTML de una CAPA [IE>5 / NS>6]
var capa=document.getElementById(’idCapa’);
capa.innerHTML=Hola”;”
Modificar la posicion del scroll de una CAPA [IE>5 / NS>6]
var capa=document.getElementById(’idCapa’);
capa.scrollTop=0;
Seccion 9: Capas en HTML 36
Atributos de las Capasposition Puede tener dos valores, relative o absolute.top distancia en vertical donde se colocara la capaleft indica la distancia en horizontal .height el tamano de la capa en vertical, es decir, su alturawidth ndica la anchura de la capa.visibility si la capa se puede ver en la pagina o permanece oculta al usuario.z-index posicion sobre el eje z que tendran las distintas capas de la pagina.clip sirve para recortar determinadas areas de la capa
rect (<top>, <right>, <bottom>, <left>)
Seccion 9: Capas en HTML 37
Diseno 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>
Seccion 9: Capas en HTML 38
Capas con Texto
<SCRIPT LANGUAGE="JavaScript">n = (document.layers) ? 1:0ie = (document.all) ? 1:0n6 = (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>
Seccion 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>
Seccion 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 = "visible"if (ie) uno.style.visibility = "visible"
}
function Ocultar() {if (n6) document.getElementById(’uno’).style.visibility = "hidden"if (ie) uno.style.visibility = "hidden"
}</SCRIPT>
Seccion 9: Capas en HTML 41
Capas con un documento
<SCRIPT LANGUAGE="JavaScript"><!--n = (document.layers) ? 1:0ie = (document.all) ? 1:0n6 = (document.getElementById) ? 1:0
function carga(page) {if (n) document.textframe.src = pageif (ie) textframe.document.location = pageif (n6) document.getElementById(’textframe’).src=page
}function show() {
if (n) document.textN.visibility = "show"if (n6) document.getElementById(’uno’).style.visibility = "visible"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"}
//-->
Seccion 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>
Seccion 9: Capas en HTML 43
Capas con Movimiento
<SCRIPT LANGUAGE="JavaScript">
var sufijo;objectLeftPos = 0;objectTopPos = 0;n = (document.layers) ? 1:0ie = (document.all) ? 1:0n6 = (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>
Seccion 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>