universidad de cantabria javascript -...

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

mailto:[email protected]

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.

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"></STYLE></head>


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”>


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;


Nombre delatributo


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;


Nombre delatributo


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>

 <SCRIPT LANGUAGE="JAVASCRIPT">function cuadrado(numero) {

return numero * numero;}</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

�Ejemplo Escribiendo resultados de variables y funciones con alert()

<SCRIPT LANGUAGE="JAVASCRIPT">var resul=0;function square(number) {resul= number * number;

}</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>


�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


</select> </FORM>

�Ejemplo Escribiendo resultados de variables y funciones en el document

<html><head><title>Strings_1</title><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>


</body></html>


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>


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>



<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 4: Condicion If...Else 21

</body>

</html>

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.


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>


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.


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">

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"...>


onSelect Seleccionar texto <INPUT TYPE="text"...>


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>


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.


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’);


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]


capa.innerHTML=Hola”;”

Modificar la posicion del scroll de una CAPA [IE>5 / NS>6]


capa.scrollTop=0;


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>)


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>


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>


<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>


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>

Capas con un documento

<SCRIPT LANGUAGE="JavaScript">


</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>


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>


<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>

universidad de cantabria javascript -...

Documents