HTML Dinámico

Instituto Tecnolgico de Orizaba
Ingeniera en Sistemas Computacionales
HTML Dinmico
El HTML Dinmico (DHTML) no es ms que, en pocas palabras, una forma que tienen las pginas de aportar interactividad a las mismas. DHTML es una caracterstica de Netscape Communicator, y Microsoft Explorer y est orientada al usuario. Es tarea del navegador mostrar y manipular las pginas web. El DHTML tiene la ventaja de que es una herramienta con la que se pueden crear efectos que requieren poco ancho de banda, a la hora de bajarlos de Internet y, son estos efectos los que aumentan la funcionalidad de la pgina. Se puede utilizar para crear animaciones, juegos, aplicaciones, para introducir nuevas formas de navegar a travs de los sitios web, y para crear un autntico entramado de capas que con slo el HTML sera imposible abordar. Aunque muchas de las caractersticas del DHTML se podran duplicar con otras herramientas como Java o Flash, el DHTML ofrece la ventaja de que no requiere ningn tipo de plug-in para poder utilizarlo. Aunque las tecnologas en las que se basa el DHTML (HTML, CSS, JavaScript) estn estandarizadas, la forma en que Netscape y Microsoft las implementan difieren entre s. Por este motivo, la creacin de pginas web que usen esta tecnologa, puede llegar a convertirse en una tarea muy compleja, puesto que hay que conseguir que la pgina se visualice perfectamente en ambos navegadores. Cascading Style Sheets (CSS) Los CSS son una adicin al HTML que aporta a los desarrolladores una manera ms sofisticada de estructurar pginas web. Esto lo consigue separando el contenido de la pgina web (el texto), de la visualizacin (colores, estilos, posicionamiento, etc). Los Cascading Style Sheets Positioning (CSSP) son una extensin de los CSS, que permiten un control a nivel de pixels de las posiciones de los elementos HTML. JavaScript El JavaScript apareci, en primer lugar, para Netscape 2.0, y aada funcionalidad a los formularios del HTML, a los frames y a las ventanas. Netscape 3.0 aport nuevas caractersticas como el cambio de imgenes y controles audio/video. El Explorer 3.0, que sali poco despus que el Netscape 3.0, tambin implementaba JavaScript, pero comercializado como JScript, que era esencialmente lo mismo que el JavaScript, aunque con algunas diferencias e incompatibilidades con las que Microsoft intent hacer que los desarrolladores utilizacen su versin de JavaScript. Tanto en el Netscape como en el Explorer, se introdujeron nuevas extensiones que ofrecan a los creadores de pginas web una forma de trabajar con el DHTML. De cualquier manera, estas extensiones no se estandarizaron antes de la aparicin de estas versiones de los dos navegadores. Por este motivo, ahora tenemos dos versiones tan incompatibles de JavaScript.
HTML Dinmico
pg. 1 / 61
IBJ
Cascading Style Sheets Positioning Los Cascading Style Sheets (CSS) son la base del HTML Dinmico, tanto en el Netscape Navigator como en el Internet Explorer. Los CSS ofrecen una forma de crear un conjunto de estilos que definen cmo se mostrarn los elementos de una pgina. Los Cascading Style Sheets Positioning (CSSP) son una extensin de los CSS, y permiten un control a nivel de pixel sobre la localizacin de cualquier elemento de la pgina.
Uso del tag DIV Cuando se utilizan CSSP, estas propiedades se aplican, normalmente, a un tag DIV (division). Cuando uno pone HTML/text en un tag DIV, a este tag se le llama de varias formas: "bloque DIV", "elemento DIV", "capa-CSS" o, como suele ser ms habitual, simplemente "capa". Cuando te encuentres en una pgina o en otro manual una referencia a cualquiera de estos trminos, debes saber que se estn refiriendo a una misma cosa: a un "trozo" de HTML encerrado dentro de un tag DIV posicionado. La sintaxis de un tag DIV no difiere con respecto a otros tags: <DIV> Esto es un tag DIV </DIV> Pero al aplicar CSS a un tag DIV, podemos definir exactamente en qu parte de la pantalla se mostrar este trozo de HTML. Para esto, antes debemos dar al DIV un identificador para poder referirnos a l: <DIV ID="ejemplo"> Esto es un ejemplo de tag DIV con identificador </DIV> Las restricciones a la hora de poner identificadores a este tag, son las mismas que para casi todos los lenguajes de programacin, es decir, se puede usar cualquier combinacin de caracteres alfanumricos, incluyendo adems el subrayado (_), debiendo empezar siempre con una letra. Existen dos maneras de aplicar el CSS al tag: CSS en el propio documento: Esta forma es la ms usada: <DIV ID="ejemplo" STYLE="aqu van los estilos del tag"> Esto es un ejemplo de tag DIV con identificador y estilos </DIV>
HTML Dinmico
pg. 2 / 61
IBJ
Tag de estilo externo: El uso de esta segunda forma evidentemente produce el mismo efecto, aunque existen ciertos aspectos que hay que tener en cuenta en este caso.
<STYLE TYPE="text/css"> <!-#ejemplo {aqu van los estilos} --> </STYLE> <DIV ID="ejemplo"> Esto es un ejemplo de tag DIV </DIV> Ntese cmo se usa el ID en el tag STYLE para asignar los estilos CSS.
Propiedades Cross-Browser CSS Puesto que el objetivo de este tutorial es generar cdigo DHTML que funcione tanto en el Netscape como en el Explorer, en cierta manera estamos limitados en cuanto a los estilos y propiedades CSS que podemos usar. Generalmente, las siguientes propiedades son las que funcionan, segn define el estndar: position Define cmo se posicionar el tag DIV: "relative" indica que las coordenadas estn especificadas con respecto a otro elemento, mientras que "absolute" significa que el tag DIV se colocar en las coordenadas sealadas. left Posicin izquierda del tag (nmero de pixels desde el extremo izquierdo del navegador). top Posicin superior del tag (nmero de pixels desde el extremo superior del navegador). width Ancho del tag DIV. Cualquier cosa que se coloque en el interior del tag, se ajustar segn este valor. Si usas capas para crear animaciones, deberas definir siempre el ancho de la capa. La razn est en que en el Explorer el ancho por defecto es el ancho de la pantalla. Por tanto, si mueves la capa por la pantalla, aparecer una barra de desplazamiento en la parte inferior, lo cual no es muy apropiado porque, adems de incmodo, ralentiza la animacin. height Altura del tag DIV. Esta propiedad no se suele usar demasiado a menos que quieras recortar la capa.
HTML Dinmico
pg. 3 / 61
IBJ
clip Define el rectngulo de recorte de la capa. Los valores que se utilizan para definirlo son los de las cuatro esquinas: arriba, derecha, abajo e izquierda. visibility Determina si la capa ser "visible", "hidden" (oculta) o "inherit" (hereda visibilidad, opcin por defecto). z-index La profundidad del tag DIV. background-color Color de fondo del tag DIV. En el Netscape, esta propiedad slo se aplica al color de fondo del texto. Si quieres dibujar cuadros con CSS, puedes ajustar la propiedad layer-background-color al mismo valor. layer-background-color Color de fondo del tag DIV. Slo para el Netscape. background-image Imagen de fondo de la capa. Slo para el Internet Explorer. layer-background-image Imagen de fondo de la capa. Slo para el Netscape Navigator. La sintaxis de los CSS difiere del HTML, se usan dos puntos para separar la propiedad y su valor, y se usa punto y coma para separar las distintas propiedades: position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0px 200px 100px 0px); visiblity: visible; z-index: 1; background-color:#FF0000; layer-background-color:#FF0000; background-image:URL(icono.gif); layer-background-image:URL(icono.gif); Uno tiene cierta flexibilidad a la hora de asignar propiedades CSS. En primer lugar, no tenemos que definir todas ellas. Los espacios en blanco se ignoran, por lo que podemos tener todas ellas en la misma lnea, en lneas separadas, usar tabulados, etc. Adems, la unidad por defecto es el pixel, por lo que no es necesario poner "px" tras cada valor de posicin, aunque sin embargo se recomienda hacerlo, por posibles incompatibilidades entre el Netscape y el Explorer.
HTML Dinmico
pg. 4 / 61
IBJ
Una asignacin de propiedades podra ser la siguiente: position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000; El ejemplo completo sera: Ejemplo Interno (Con asignacin de propiedades en el propio tag DIV): <DIV ID="ejemplo" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1" > Esto es un ejemplo de tag DIV con estilos </DIV> Ejemplo Externo (Con asignacin de propiedades fuera del tag DIV): <STYLE TYPE="text/css"> <!-#ejemplo {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;} --> </STYLE> <DIV ID="ejemplo"> Esto es un ejemplo de tag DIV con estilos </DIV>
Cross-Browser JavaScript Se puede usar JavaScript para acceder y cambiar las propiedades de los elementos CSS-P. De cualquier manera, parte de la sintaxis difiere segn se use el Netscape o el Explorer. A continuacin, se muestra una forma de crear fcilmente "Cross-Browser JavaScripts" o, traducido literalmente al espaol, "scripts de navegador cruzado", es decir, scripts que funcionan en los dos navegadores. Comprobacin del navegador Lo primero que se debe hacer es, por tanto, comprobar el navegador con el que el usuario est accediendo a la pgina DHTML. El siguiente cdigo se convertir en estndar a la hora de realizar esta tarea: ns = (document.layers)? true:false ie = (document.all)? true:false El objeto document.layers es propio del Netscape, mientras que el objeto document.all es del Explorer. Lo que se hace en el cdigo mostrado no es ms que colocar verdadero o falso en las dos variables (ns para el Netscape y ie para el Explorer ), segn el caso.
HTML Dinmico
pg. 5 / 61
IBJ
Tras ejecutar el cdigo anterior, siempre que alguna tarea dependa del navegador en el que se est visualizando la pgina, no se tiene ms que utilizar las dos variables anteriores: if (ns) { // Hacer algo para el Netscape Navigator } if (ie) { // Hacer algo para el Internet Explorer }
Ejemplo 1
Uso del JavaScript y CSS-P Digamos por ejemplo que tenemos un tag DIV como el siguiente: <DIV ID="divIcono" STYLE="position:absolute; left:50; top:100; width:30;"> <IMG SRC="Icono.gif" WIDTH=30 HEIGHT=30 BORDER=0> </DIV> En el Netscape, la forma general para acceder a una propiedad CSS-P es: document.divIcono.nombrePropiedad o bien: document.layers["divIcono"].nombrePropiedad En el caso del Explorer: divIcono.style.nombrePropiedad o bien: document.all["divIcono"].style.nombrePropiedad Donde, por supuesto, nombrePropiedad puede ser cualquier propiedad CSS-P, como left, top, width, etc... Simplificando Cdigo (Variables Directas) Lo anterior nos lleva a que, si queremos cambiar, por ejemplo, el ancho del tag DIV, tenemos que escribir lo siguiente: if (ns) document.divIcono.width = 150px if (ie) divIcono.style.width = 150px
HTML Dinmico
pg. 6 / 61
IBJ
Y esto se debera repetir para cada uno de los tags que queramos modificar, lo que generara un autntico montn de lneas y, encima, la mayor parte de ellas perteneceran a la estructura condicional if. Para evitar esto, se puede utilizar una tcnica alternativa, que simplificara bastante el cdigo. La idea est en crear una variable adicional para cada tag DIV, que vamos a hacer que apunte hacia el objeto en s. Con un ejemplo se ver mejor: if (ns) nuevaVariable = document.divIcono if (ie) nuevaVariable = divIcono.style Tras este cdigo, si queremos cambiar el ancho del tag, no tenemos que preocuparnos del navegador en el que se est visualizando la pgina, porque la variable sobre la que vamos a modificar el ancho ya apunta hacia el objeto propiamente dicho: nuevaVariable.width = 150px Esto tiene mayores beneficios cuanto mayor sea el nmero de tags DIV que vayamos a modificar, puesto que nos ahorramos ms cdigo. Lo que se hara sera crear una funcin inicial que se ejecutara una sola vez, cuando se cargase la pgina, y hara que las variables apuntasen hacia los objetos.
Mostrar y Ocultar Elementos
Si le pedimos al navegador que nos diga si un determinado elemento est oculto o visible, obtenemos diferentes respuestas dependiendo del que estemos usando para visualizar la pgina (por ejemplo, el Explorer devolver visible, mientras que el Netscape show). Con lo cual, el hecho de que an no exista un estndar, nos va a obligar a escribir cdigo para los dos navegadores. En caso del Netscape Para mostrar un elemento: document.nombreDiv.visibility = "show" y para ocultarlo: document.nombreDiv.visibility = "hide" En caso del Explorer Para mostrar un elemento: nombreDiv.style.visibility = "visible" y para ocultarlo: nombreDiv.style.visibility = "hidden" Lo que veremos a continuacin, sern funciones para mostrar y ocultar elementos. Puesto que se hace siempre igual, es aconsejable hacer funciones que implementen estas tareas.
HTML Dinmico
pg. 7 / 61
IBJ
Bien, ya hemos visto que tenemos la posibilidad de crear identificadores que apunten directamente al objeto en s. Pues dependiendo de si utilizamos esta tcnica o no, implementaremos las funciones de mostrar y ocultar objetos de una forma o de otra.
Funciones sin Identificadores Directos
La implementacin queda como sigue: function Mostrar (id) { if (ns) document.layers[id].visibility = "show" else if (ie) document.all[id].style.visibility = "visible" } function Ocultar (id) { if (ns) document.layers[id].visibility = "hide" else if (ie) document.all[id].style.visibility = "hidden" }
Como podemos ver, dentro de las funciones, distinguimos a quin le asignamos el atributo correspondiente. Esto quiere decir que no es simplemente la propiedad visibility de la variable que recibimos por parmetros, como ocurrir en el siguiente caso. Las llamadas a estas funciones son: Mostrar ("IDDiv") y Ocultar ("IDDiv")
Donde IDDiv es el identificador de la capa que queramos modificar.
Ejemplo 2
HTML Dinmico
pg. 8 / 61
IBJ
Funciones con Identificadores Directos
Ahora veremos las funciones para el caso de usar estos nuevos identificadores: function Mostrar (objeto) { if (ns) objeto.visibility = "show" else if (ie) objeto.visibility = "visible" } function Ocultar (objeto) { if (ns) objeto.visibility = "hide" else if (ie) objeto.visibility = "hidden" } Como ya hemos visto, la ventaja de utilizar este mtodo, es que las propiedades CSS son directamente un campo del identificador que recibimos por parmetros, independientemente del navegador que estemos usando. En este caso, las llamadas que se deben hacer son las siguientes: Mostrar (IDDiv) y Ocultar (IDDiv)
Ejemplo 3
Niveles de Profundidad
Este aspecto es muy fcil de utilizar, y con l podemos conseguir efectos muy logrados. Como se puede suponer, con esta propiedad (z-index) controlamos cuan lejos en el espacio est la capa que estamos tratando. De esta manera, podemos colocar unas capas delante de otras, de manera que oculte total o parcialmente las dems. Los valores que se le dan funcionan de la siguiente manera: cuanto mayor es el nmero, ms cerca se encuentra desde nuestro punto de vista. Por ejemplo, si una capa tiene una profundidad de 3 y otra de 4, veremos totalmente esta segunda capa, y de la primera veremos lo que no cubra la segunda.
Ejemplo 4
HTML Dinmico
pg. 9 / 61
IBJ
Mover Elementos
Supongamos que nuestro objetivo es mover un tag DIV a una nueva posicin, por ejemplo a la coordenada (300,200). Para ello, lo que se debe hacer es asignar las nuevas coordenadas izquierda y superior del elemento. El cdigo necesario es el siguiente: tagDiv.left = 300 tagDiv.top = 200 Donde tagDiv es el identificador directo del tag a mover. Importante: A partir de este momento, todos los ejemplos y explicaciones, se harn utilizando variables que apuntan directamente al tag en s. La funcin parseInt A la hora de asignar nuevas coordenadas vemos que no hay ninguna diferencia entre los dos navegadores. Pero es que la particularidad viene ahora: en la lectura de valores. Cuando lo que queremos no es asignar una nueva coordenada, sino por ejemplo comprobar cul es el valor de la propiedad left, nos daremos cuenta de que existe una peculiaridad en el Explorer. La causa est en que este navegador no nos devuelve el nmero y ya est, sino que adems nos devuelve el sufijo px (pixels). Por ejemplo, un valor completo podra ser: 300px. Si luego queremos operar con este valor, tendremos un problema. Para solucionarlo, existe una funcin que se encarga de eliminar todos los caracteres no numricos del parmetro que se le pasa: la funcin parseInt. Por tanto, para leer la propiedad left en el Explorer, haramos lo siguiente: var izquierda = parseInt (tagDiv.left) Tras esta lnea, la variable izquierda tendra la coordenada x del comienzo del tag, sin el sufijo px.
Ejemplo 5
Movimientos Animados
Lo que aprendimos en el apartado anterior fue a mover objetos. Pero, qu diferencia existe entre mover un elemento y aplicarle un movimiento animado? Pues esencialmente en lo siguiente: en el ejemplo anterior, el grfico, colocado en una determinada posicin, desapareca y apareca en otra lejana y totalmente diferente. Lo que haremos en esta parte ser mover de nuevo el grfico, de una posicin inicial hasta una posicin final, pero veremos cmo el grfico se va moviendo, haciendo todo el recorrido entre los dos puntos extremos. Si queremos mover el grfico hacia la derecha, hasta la posicin 400, por ejemplo, lo que debemos hacer es incrementar poco a poco la propiedad left del tag, para que se desplace: tag.left = parseInt (tag.left) + 3
HTML Dinmico
pg. 10 / 61
IBJ
La funcin setTimeout Al hacer esto, el tag se mover tres pixels a la derecha. Por tanto, no hay ms que repetir esta lnea hasta que llegue a su posicin final, es decir, introducir esta lnea en un proceso repetitivo. Proceso repetitivo no implica necesariamente utilizar bucles. Lo que se hace en DHTML es incluir la lnea que produce la animacin en una funcin, y tras la primera ejecucin de la misma, la volvemos a llamar tras un tiempo determinado. Esto se hace con la funcin setTimeout. Esta funcin recibe dos parmetros: una funcin y un nmero. Lo que hace exactamente es llamar a la funcin que recibe una vez transcurrido el tiempo indicado por el segundo parmetro (expresado en milisegundos). Por ejemplo: setTimeout ("animar()",1000) Esta lnea llamara a la funcin animar tras un segundo. Bien, ahora que ya sabemos cmo efectuar el proceso repetitivo, ya podemos animar el grfico: function animar() { if (parseInt(tag.left) < 400) { tag.left = parseInt(tag.left) + 3 setTimeout("animar()",30) } } Como se puede ver, cada 30 milisegundos, la grafico avanza 3 pixels. Podemos modificar la velocidad del movimiento cambiando el tiempo transcurrido entre dos llamadas a la funcin (segundo parmetro de la funcin setTimeout), y alterando tambin el nmero de pixels de diferencia entre dos posiciones consecutivas del grafico.
Ejemplo 6
Evidentemente, para mover el grafico en diagonal, no habra ms que modificar tanto las coordenadas left como top en cada iteracin: function animar() { if (parseInt(tag.left) < 400) { tag.left = parseInt(tag.left) + 3 tag.top = parseInt(tag.top) + 3 setTimeout("animar()",30) } }
Ejemplo 7
HTML Dinmico
pg. 11 / 61
IBJ
Animar un elemento con un ngulo dado
En esta ocasin, ya no nos vale el hecho de animar un elemento en una simple lnea horizontal ni vertical, ni siquiera diagonal. Ahora, nuestro objetivo est en poder especificar un ngulo, y ver que el tag se mueve segn ese ngulo. Para ello, debemos recordar algo de trigonometra bsica:
Donde pixels es el nmero de ellos que vamos a avanzar en cada iteracin (podra ser 3, como en los casos anteriores). En cada una de ellas, vamos a mover el elemento, una cantidad fija, tanto en x como en y, por ello, lo primero que haremos (y lo haremos una sola vez) ser calcular estos incrementos: incrementoX = pixels * Math.cos(Radianes(angulo)) incrementoY = pixels * Math.sin(Radianes(angulo)) Radianes no es ms que una funcin que nos devuelve el ngulo que recibe, pasado a radianes: function Radianes(grados) { return (grados*Math.PI) / 180 } se puede decir que ya est todo el clculo hecho, ahora slo que escribir la funcin animar: function Animar() { if (parseInt(objetoGrfico.left) < 400) { objetoGrafico.left = parseInt(objetoGrafico.left) + incrementoX objetoGrafico.top = parseInt(objetoGrafico.top) + incrementoY setTimeout("Animar()",30) } }
Ejemplo 8
HTML Dinmico
pg. 12 / 61
IBJ
Animaciones con el Ratn
Si utilizamos de manera apropiada los links, los podremos usar para producir animaciones. Por ejemplo, podremos mover el grfico pulsando un link y pararlo cuando lo soltemos. Las funciones necesarias son prcticamente iguales que las vistas hasta ahora. Adicionalmente, necesitamos en esta ocasin una variable booleana pulsado, que nos indica en todo momento si el link est pulsado. Esta variable, evidentemente, debe estar inicializada a falso. Ahora, la funcin que produce la animacin, va a hacer una comprobacin nada ms comenzar su ejecucin: animar el grfico slo si pulsado est a verdadero. Lo ms importante se hace cuando se declara el link: <a href="javascript:void(null)" onMouseDown="pulsado=true; Animar();" onMouseUp="pulsado=false" onMouseOut="pulsado=false">Mover grafico</A> La explicacin es bien sencilla: cundo comienza a moverse el grfico? Pues cuando se pulse el link (onMouseDown). En ese momento, colocamos pulsado a verdadero y llamamos a Animar. Hay dos motivos por los que la grafico puede dejar de moverse: que el usuario deje de pulsar el link (onMouseUp) o que, aun teniendo el link pulsado, mueva el ratn y lo aleje del link (onMouseOut). En ambos casos, lo nico que hay que hacer es colocar pulsado a falso. Con esto, conseguimos que la siguiente vez que se entre a la funcin Animar, salga sin ejecutar nada, por la comprobacin que se hace dentro. NOTA: En el Internet Explorer, la nica manera de parar la animacin, es soltando el botn del ratn. Aunque dejemos de sealar al link, la grafico sigue movindose.
Ejemplo 9
Otra opcin que se puede tomar es la de tener dos links, uno para comenzar la animacin, y otro para detenerla. Para este caso, lo nico que cambiara seran los links, ya que tendramos dos: <a href="javascript:void(null)" onMouseDown="pulsado=true; Animar();">Mover Grafico</A> <a href="javascript:void(null)" onMouseDown="pulsado=false;">Parar Grafico</A>
Ejemplo 10
Eventos de Teclado
Los eventos producidos por el teclado son una de las herramientas ms potentes que tiene el diseador de pginas web a su disposicin. Tiene control sobre casi todas las teclas que se pulsan o se dejan de pulsar.
HTML Dinmico
pg. 13 / 61
IBJ
NOTA: Netscape no incluye la posibilidad de capturar eventos generados por el teclado en las versiones Unix de Communicator 4.0. Para capturar eventos del teclado, lo primero que hay que hacer es "decirle" al navegador que queremos capturar esos eventos: document.onkeydown = TeclaPulsada Cuando el navegador ejecute esta lnea, sabr que siempre que se pulse una tecla, deber llamar a la funcin TeclaPulsada (El nombre de la funcin es el que el programador quiera). Ahora la pregunta es la siguiente: cmo sabemos la tecla que se ha pulsado? Pues la respuesta depende del navegador que estemos utilizando.
En caso del Netscape
En el Netscape es algo ms complicado todo lo relacionado con el manejo de eventos. Debemos colocar una lnea extra para decirle al Netscape que siempre est atento por el evento de pulsar una tecla. Si no lo hacemos, habr problemas con otros eventos, como cuando se pulsa un botn del ratn. document.onkeydown = TeclaPulsada if (ns) document.captureEvents(Event.KEYDOWN) Nuestra funcin TeclaPulsada recibe un parmetro oculto. Llamaremos a este parmetro tecla. Con esto, la declaracin de la funcin queda como sigue: function TeclaPulsada (tecla) tecla representa la tecla que se ha pulsado. Para conocer cul ha sido, debemos utilizar la propiedad which: tecla.which Esto nos devuelve el nmero que corresponde a la tecla pulsada. Por tanto, para convertir este nmero al caracter correspondiente utilizamos: String.fromCharCode (tecla.which) Pues bien, si colocamos ahora todo junto, ya tenemos nuestra funcin TeclaPulsada definida (al final de la funcin, se ha colocado una lnea que lo nico que hace es mostrar una ventana que muestra el cdigo; y la tecla en s): function TeclaPulsada (tecla) { var teclaCodigo = tecla.which var teclaReal = String.fromCharCode (teclaCodigo) alert("Cdigo de la tecla: " + teclaCodigo + "\nTecla pulsada: " + teclaReal) }
Ejemplo 11 (Slo Netscape)
HTML Dinmico
pg. 14 / 61
IBJ
En caso del Explorer
En este caso, el proceso es bastante parecido. Para empezar, la funcin TeclaPulsada no recibe el parmetro tecla. Por tanto, en lugar de usar tecla.which para conocer la tecla, usamos event.keyCode. Para la conversin a la tecla real, volvemos a usar la misma funcin, porque ya tenemos el cdigo de la tecla, y eso es lo que recibe String.fromCharCode. La funcin TeclaPulsada queda ahora: function TeclaPulsada () { var teclaCodigo = event.keyCode var teclaReal = String.fromCharCode (teclaCodigo) alert("Cdigo de la tecla: " + teclaCodigo + "\nTecla pulsada: " + teclaReal) }
Ejemplo 12 (Slo Explorer) Combinando Ambos
Por supuesto, lo que queremos es utilizar el ejemplo anterior tanto en el Netscape como en el Explorer. Si nos fijamos bien, la diferencia primordial est en la asignacin de teclaCodigo. Por eso, lo que debemos hacer es ejecutar esta lnea en un if, para distinguir el navegador que estemos usando. Veamos el cdigo: var teclaCodigo var teclaReal document.onkeydown = TeclaPulsada if (ns) document.captureEvents(Event.KEYDOWN) function TeclaPulsada (tecla) { if (ns) teclaCodigo = tecla.which else if (ie) teclaCodigo = event.keyCode teclaReal = String.fromCharCode (teclaCodigo) alert("Cdigo de la tecla: " + teclaCodigo + "\nTecla pulsada: " + teclaReal) }
Ejemplo 13
HTML Dinmico
pg. 15 / 61
IBJ
Animando Elementos con el Teclado
Vayamos ahora con lo que ms nos interesa. Al igual que movimos anteriormente el grafico utilizando el ratn, haremos ahora lo mismo pero usando el teclado. Pero vayamos por partes, en primer lugar, veremos cmo iniciar el movimiento del grafico. El funcionamiento de lo que queremos es bien sencillo: pulsamos una tecla, y el grafico se mover indefinidamente. Para esto, debemos elegir una tecla, por ejemplo la m de mover. Una vez elegida la tecla, tenemos que conocer cul es su cdigo numrico, y aqu es donde aparece otro inconveniente, porque los cdigos de las teclas son diferentes en ambos navegadores. Pues bien, para conocer los cdigos de la m, podemos usar el tercer ejemplo de esta misma seccin, tanto en el Netscape como en el Explorer. El cdigo para el Explorer es 77, y para el Netscape es 109. Ahora, cada vez que se pulse una tecla, comparamos los cdigos para ver si iniciamos el movimiento del grafico. Aqu est el cdigo: function Inicio() { if (ns) grafico = document.divGrafico else if (ie) grafico = divGrafico.style document.onkeydown = TeclaPulsada if (ns) document.captureEvents(Event.KEYDOWN) } function TeclaPulsada (tecla) { if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) Animar() } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) Animar() } }
HTML Dinmico
pg. 16 / 61
IBJ
function Animar() { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) }
Ejemplo 14
Este ejemplo es correcto, aunque tiene dos limitaciones que vamos a corregir rpidamente: en primer lugar, lo que ms salta a la vista es que el grafico jams se detiene, todo lo contrario; y en segundo lugar, si pulsamos varias veces la m, la grafico cada vez se mueve ms y ms rpido. Correccin 1 Para conseguir que el grafico se detenga cuando soltemos la tecla, esto es, que slo se mueva mientras estemos pulsando la m, necesitamos otro evento, el keyUp. Este evento se lanza cada vez que soltemos una tecla y, al igual que el keyDown, necesitamos inicializarlo. Ahora, toda esta inicializacin queda de la siguiente manera: document.onkeydown = TeclaPulsada document.onkeyup = TeclaSoltada if (ns) document.captureEvents (Event.KEYDOWN | Event.KEYUP) TeclaSoltada es la funcin que se llamar cada vez que se deje de pulsar un tecla. Como ya hemos hecho antes, el cdigo dentro de Animar lo introduciremos en un if, de forma que slo se ejecute si una variable activa vale verdadero. function Animar() { if (activa) { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) } }
Esta variable la colocaremos a verdadero desde que se pulse la m y, cuando el usuario la suelte, la colocaremos a falso Veamos primero cmo ponemos a verdadero la variable activa:
HTML Dinmico
pg. 17 / 61
IBJ
function TeclaPulsada (tecla) { if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) { activa = true Animar() } } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) { activa = true Animar() } } } Y ahora cmo la ponemos a falso: function TeclaSoltada (tecla) { if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) activa = false } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) activa = false } } Ahora, el grafico ya slo se mueve mientras estamos pulsando la m, porque es cuando la variable activa permanece a verdadero.
Ejemplo 15
HTML Dinmico
pg. 18 / 61
IBJ
Correccin 2 Lo ltimo que nos queda ahora es conseguir que el grafico no aumente su velocidad, en este caso, al dejar pulsada la tecla. Es muy simple, lo que tenemos que hacer es aadir un if en la funcin TeclaPulsada, de manera que slo se llame a Animar si el grafico an no se est moviendo (es decir, si la variable activa vale falso). Veamos la nueva funcin: function TeclaPulsada (tecla) { if (ns) { teclaCodigo = tecla.which if ( (teclaCodigo == 109) && !activa) { activa = true Animar() } } else if (ie) { teclaCodigo = event.keyCode if ( (teclaCodigo == 77) && !activa) { activa = true Animar() } } }
Ejemplo 16 Recorte de Capas
El recorte de una capa se refiere a qu parte de la capa ser visible. No son lo mismo los valores de recorte, que el ancho y el alto de la capa. El ancho y el alto de la capa le dicen al navegador cmo ajustar los elementos en el interior, para saber cundo se salta de lnea, por ejemplo. Los valores de recorte son, por as decirlo, las coordenadas de una ventana por la que se observar la capa, es decir, que lo que no est dentro de la ventana, no se ver. La zona de recorte se define como un rectngulo, ajustando cada uno de los cuatro bordes: superior, derecho, inferior, izquierdo. De esta manera, se puede recortar la capa slo por un borde, si es lo que se desea. Hay que tener en cuenta, a la hora de colocar estos valores, que todos son con respecto a la capa (no son absolutos), tomando como base la esquina superior izquierda de la misma. La sintaxis de la propiedad CSS para el recorte es: clip:rect(superior,derecho,inferior,izquierdo)
HTML Dinmico
pg. 19 / 61
IBJ
Donde superior, derecho, inferior e izquierdo son los valores de los bordes, en pixels. A continuacin muestro un ejemplo de tag DIV usando una ventana de recorte: <div ID="divImagen" STYLE="position:absolute; left:50; top:50; width:100; height:50; clip:rect(-10,110,60,-10);"> </div> En esta capa, se crea un borde extra de diez pixels alrededor de toda la capa: la primera coordenada (arriba), vale -10, lo que crea el borde extra superior; la segunda (derecha) vale 110, lo que supone diez ms que el ancho de la capa; la tercera (abajo) est a 60, que son diez pixels ms que el alto de la capa; y por ltimo, la cuarta (izquierda) vale -10, creando as el borde extra izquierdo. En todo este apartado de recorte, vamos a colocar dentro de la capa que estemos tratando como ejemplo, una imagen de 500x358 pixels (mar.jpg), que nos va a ayudar a ver los efectos del recorte. Por tanto, la capa con la imagen ahora la declaramos as: <div ID="divImagen" STYLE="position:absolute; left:50; top:50; width:500; height:358; clip:rect(0,500,358,0); background-image:URL(mar.jpg); layer-background-image: URL(mar.jpg); repeat:no;"> </div> Como se puede observar, en este caso las coordenadas de recorte no estn afectando a la imagen, porque la ventana es exactamente del mismo tamao que la imagen. Pero vayamos por partes, hay tres propiedades arriba que no hemos utilizado hasta ahora. Las tres son necesarias para colocar una foto dentro de una capa (si es que la queremos colocar como una propiedad CSS de la capa). La primera de ellas, layer-background-image:URL(mar.jpg) indica la imagen que queramos introducir, aunque slo funciona para el Explorer. Por eso, para dejarlo listo para el Netscape, utilizamos la otra propiedad, layer-background-image:URL(mar.jpg). La tercera y ltima, repeat:no es para ambos navegadores, y nos indica si queremos hacer que la foto se repita, como un mosaico. La siguiente capa s que limita la imagen, concretamente la reduce 100 pixels por la derecha: <div ID="divImagen" STYLE="position:absolute; left:50; top:50; width:500; height:358; clip:rect(0,400,358,0); background-image:URL(mar.jpg); layer-background-image: URL(mar.jpg); repeat:no;"> </div>
Ejemplo 17
Recorte en el Netscape
Ahora que hemos recortado la imagen, podemos tanto leer los valores de recorte como cambiarlos. Para el Netscape, se pueden cambiar o leer estos valores individualmente:
HTML Dinmico
pg. 20 / 61
IBJ
document.divImagen.clip.top document.divImagen.clip.right document.divImagen.clip.bottom ocument.divImagen.clip.left Por ejemplo, para mostrar una ventana con el valor de recorte del borde inferior: alert (document.divImagen.clip.bottom) Y para colocarlo a 175: document.divImagen.clip.bottom = 175
Recorte en el Explorer
En esta ocasin, se leen los todos valores a la vez. Por ejemplo, para comprobar los valores de recorte y mostrar una ventana con esa informacin: alert (divImagen.style.clip) Esto devolver una ristra con los valores de recorte. Una ristra de respuesta podra ser: "rect(20px 45px 75px 60px)" Si por el contrario, lo que queremos es cambiar alguno de los cuatro valores de recorte, no lo podemos hacer individualmente, tenemos que ajustar los cuatro a la vez: divImagen.style.clip = "rect(0px 200px 75px 10px)"
Comprobar Valores de Recorte
Trabajar con capas que queramos recortar no es difcil, pero s hay que escribir cdigo para hacer pequeas cosas, sobre todo en el caso del Internet Explorer. Por eso, lo mejor es automatizar todas estas tareas introducindolas en funciones. Y es precisamente esto lo que vamos a ver en el resto de este apartado: las funciones que con ms frecuencia solemos usar. En primer lugar, crearemos una funcin que nos devuelva el valor del borde de recorte que nosotros le digamos: function LeeRecorte(objeto,borde) { if (ns) { if (borde=="superior") return objeto.clip.top
HTML Dinmico
pg. 21 / 61
IBJ
if (borde=="derecho") return objeto.clip.right if (borde=="inferior") return objeto.clip.bottom if (borde=="izquierdo") return objeto.clip.left } else if (ie) { var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") if (borde=="superior") return Number(vectorRecorte[0]) if (borde=="derecho") return Number(vectorRecorte[1]) if (borde=="inferior") return Number(vectorRecorte[2]) if (borde=="izquierdo") return Number(vectorRecorte[3]) } } Como vemos, recibe dos parmetros, objeto es la capa que vamos a modificar aunque, eso s, debe ser un identificador directo, y borde representa el borde de recorte del que queremos conocer su valor. Es una ristra, y sus posibles valores son: 'superior', 'inferior', 'derecho' e 'izquierdo'. Por tanto, una llamada a esta funcin podra ser: LeeRecorte (imagen,'derecho')
Ejemplo 18
Ajustar Valores de Recorte
La siguiente funcin la usamos para colocar los valores de recorte a los que queramos: function Recortar (objeto,superior,derecho,inferior,izquierdo) { if (ns) { objeto.clip.top = superior objeto.clip.right = derecho objeto.clip.bottom = inferior objeto.clip.left = izquierdo }
HTML Dinmico
pg. 22 / 61
IBJ
else if (ie) objeto.clip = "rect(" + superior + "px " + derecho + "px " + inferior + "px " + izquierdo + "px)" } Lo que recibe es la capa (una vez ms como variable directa) y los cuatro nuevos valores para el recorte.
Ejemplo 19
Valores Relativos de Recorte
Por ltimo, otra funcin muy til es aquella que usamos para aplicar un recorte pasndole valores relativos, cuando queremos aumentar o disminuir la ventana: function RecorteRelativo(objeto,superior,derecho,inferior,izquierdo) { if (ns) { objeto.clip.top = LeeRecorte(objeto,'superior') + superior objeto.clip.right = LeeRecorte(objeto,'derecho') + derecho objeto.clip.bottom = LeeRecorte(objeto,'inferior') + inferior objeto.clip.left = LeeRecorte(objeto,'izquierdo') + izquierdo } else if (ie) objeto.clip = "rect("+(this.LeeRecorte(objeto,'superior')+superior)+"px "+(this.LeeRecorte(objeto,'derecho')+derecho)+"px "+Number(this.LeeRecorte(objeto,'inferior')+inferior)+"px "+Number(this.LeeRecorte(objeto,'izquierdo')+izquierdo)+"px)" } Ahora, los cuatro valores de recorte que le pasamos son relativos, es decir, indican el nmero de pixels que queremos aumentar o disminuir cada borde (valor positivo o negativo).
Ejemplo 20
Recorte Animado
Pues bien, ahora que ya hemos visto cmo leer y cambiar los valores de recorte, ha llegado el momento de ver lo mejor de este apartado: aplicar animaciones al recorte. Realmente no es nada que no hayamos visto hasta el momento, es simplemente la conjuncin de las animaciones con el recorte. Para ello, usaremos la funcin setTimeout.
HTML Dinmico
pg. 23 / 61
IBJ
Por ejemplo, supongamos que queremos ver la imagen completa, pero que poco a poco vayamos viendo menos por la parte derecha, esto es, el valor del borde derecho de recorte va disminuyendo. Entonces: function AnimarRecorte() { if (LeeRecorte(imagen,'derecho') > 100) { RecorteRelativo (imagen,0,-10,0,0) setTimeout ("AnimarRecorte()",30) } } Lo que hacemos es ir decrementando poco a poco el valor del borde derecho de recorte (en diez pixels cada vez), hasta llegar a los cien, de esta manera acabaremos viendo nicamente los 100 primeros pixels de la imagen.
Ejemplo 21
Cambiar Imgenes
Para conseguir mejores ejectos visuales en nuestras pginas web, nos puede interesar cambiar dinmicamente las imgenes que mostramos. En esta seccin, alternaremos entre dos:
<>
<>
Hay que asegurarse de que ambas imgenes tienen el mismo tamao, porque de lo contrario, al cambiar de una a otra, la nueva imagen tratar de ajustarse a la zona que tiene asignada, produciendo algn movimento en los elementos de nuestra pgina. Si an as, se desea continuar usando imgenes de distinto tamao, se puede utilizar otra tcnica alternativa a esta, que es la de tener cada imagen en una capa, e ir mostrando y ocultando la que nos interese en cada momento. Pues bien, inicialmente, deberemos mostrar una de las dos en pantalla. Para ello, tendremos un tag que contendr el interrogante: <div ID="divImagen"> <IMG NAME="miImagen" SRC="../graficos/Interrogante.gif"> </div>
HTML Dinmico
pg. 24 / 61
IBJ
Como se puede ver, he asignado un nombre a la imagen (miImagen). Este nombre lo usaremos para cambiarla posteriormente.
Pre-Carga de Imgenes
Antes de poder cambiar las imgenes, hay que efectuar una carga previa en la cach del navegador. Este es el cdigo necesario para ello: nombreImagen = new Image() nombreImagen.src = "rutaImagen" Este cdigo crea un objeto Imagen. A partir de este momento, siempre que queramos cambiar la imagen, sta ya estar disponible, es decir, no habr que esperar a que el navegador la descargue, porque ya la habr descargado y estar en la cach. En nuestro caso, tenemos dos imgenes, y evidentemente queremos tener ambas en la cach, por tanto, veremos el cdigo necesario en nuestro caso en particular: imagenInterrogante = new Image() imagenInterrogante.src = "Interrogante.gif" imagenDespertador = new Image() imagenDespertador.src = "Despertador.gif"
Funcin PreCarga
Si por cada imagen que queramos tener en la cach, tenemos que escribir estas mismas dos lneas, ser una autntica pesadez cuando tengamos que tratar unas cuantas. Por eso, lo mejor es tener una funcin que se encargue de ello. function PreCarga (objetoImagen, rutaImagen) { if (document.images) { eval (objetoImagen +' = new Image()') eval (objetoImagen +'.src = "' + rutaImagen + '"') } } Donde objetoImagen es el nombre del objeto asociado a la imagen y rutaImagen es la direccin fsica de la imagen. Es mejor pre-cargar las imgenes mientras la pgina an est cargando, en lugar de esperar a que cargue completamente para hacerlo.
HTML Dinmico
pg. 25 / 61
IBJ
Cambiar la Imagen
Una vez que hemos llevado a cabo la carga previa de las imgenes, ya podemos acceder a ellas y cambiarlas. El cambio de imgenes que estn dentro de capas, funciona diferente en ambos navegadores. Primero veremos el cdigo genrivo, y luego veremos unas funciones que ya tienen en cuenta el navegador. Si la imagen no est en una capa, la forma genrica sera: document.images["nombreImagen"].src = objetoImagen.src Donde nombreImagen es el nombre que indicamos en el tag IMG, y objetoImagen es el nombre del objeto en el que hemos hecho la pre-carga. Si la imagen est en una capa, en el Netscape debemos indicar el tag DIV en el que est la imagen. En nuestro caso, es divImagen: if (ns) document.divImagen.document.images["miImagen"].src = Despertador.src Por el contrario, en el Internet Explorer, no tenemos que hacer esto, escribimos el mismo cdigo que escribiramos si la imagen no estuviese en una capa: if (ie) document.images["miImagen"].src = Despertador.src Ahora que hemos visto cmo se hace, veremos las funciones que podemos usar para cambiar de una imagen a otra: function MuestraInterrogante() { if (ns) document.divImagen.document.images["miImagen"].src = Interrogante.src if (ie) document.images["miImagen"].src = Interrogante.src } function MuestraDespertador() { if (ns) document.divImagen.document.images["miImagen"].src = Despertador.src if (ie) document.images["miImagen"].src = Despertador.src }
Ejemplo 22
HTML Dinmico
pg. 26 / 61
IBJ
Funcin CambiarImagen
El ejemplo anterior an se puede mejorar. Como tenemos dos imgenes, lo que hicimos fue crear dos funciones para mostrar cada una de ellas. Si tuvisemos diez imgenes, tendramos que crear diez funciones, lo que supone un mucho cdigo repetido. En vez de esto, crearemos una funcin que, adem de los parmetros de las funciones anteriores, reciba tambin la capa en la que est la imagen. De esta manera, ya siempre podremos llamar a esta nueva funcin: function CambiarImagen (capa,nombreImagen,objetoImagen) { if (document.layers && capa!=null) eval('document.' + capa + '.document.images["' + nombreImagen + '"].src = ' + objetoImagen + '.src') else document.images[nombreImagen].src = eval(objetoImagen + ".src") } Ahora, podremos sustituir las dos funciones anteriores MuestraDespertador) por dos simples llamadas a esta nueva funcin: CambiarImagen ('divImagen','miImagen','Interrogante') CambiarImagen ('divImagen','miImagen','Despertador') Adems, podemos utilizar esta funcin para modificar imgenes que no estn en ninguna capa. Para hacer esto, el primer parmetro (que indica la capa) debe ser nulo: CambiarImagen (null,'miImagen','Interrogante')
Ejemplo 23
(MuestraInterrogante
Cambio de Imagen con el Ratn
Con este ttulo es posible que no se entienda que es lo que vamos a ver a continuacin. Usaremos el ratn como herramienta para cambiar de imagen, cmo? Al pasar el ratn sobre una imagen, sta cambiar y, cuando deje de apuntar hacia ella, volver a mostrar la imagen original. Para ello, usaremos la funcin CambiarImagen que acabamos de ver. Como se puede ahora suponer, en el cdigo haremos referencia a los eventos de ratn onMouseOver y onMouseOut. En cada uno de ello, haremos una llamada a CambiarImagen, para que muestre en pantalla la imagen oportuna. Una pregunta que nos puede surgir es: por qu usamos un href si no queremos declarar ningn link? La respuesta es que lo necesitamos porque en el Netscape, no existen los eventos onMouseOver y onMouseOut dentro del tag img, que es donde sera ideal colocarlos, en cambio, el href s que los tiene, y en ambos navegadores.
HTML Dinmico
pg. 27 / 61
IBJ
Como no queremos ir a ningn lado al pulsar sobre la imagen, como destino del href ponemos JavaScript:void(null). Con esto, el link existe, y se ejecuta un comando javascript que no hace nada. El cdigo necesario es el siguiente: <div ID="divImagen"> <a href="javascript:void(null)" onMouseOver="CambiarImagen('divImagen','miImagen','Despertador')" onMouseOut="CambiarImagen('divImagen','miImagen','Interrogante')"> <IMG NAME="miImagen" SRC="Interrogante.gif"> </a> </div>
Ejemplo 24
Escritura en una Capa
El ttulo puede despistar un poco. El objetivo de este apartado no es ver cmo se introduce texto en una capa. Pero por si acaso, veamos por lo menos un ejemplo simple. El usar una capa para introducir texto, es una herramienta que se puede comparar con el uso de tablas para colocar el texto de una forma determinada en nuestra pgina. Cuando se inserta este texto en una capa, se ajusta a ella de la misma manera que se ajusta al documento cuando no est en ninguna capa. Este hecho lo podemos aprovechar para provocar saltos de lnea, o para situar las palabras como ms nos apetezca, simplemente cambiando el alto y el ancho de la capa.
Ejemplo 25
Bien, tras esto, vayamos ahora con el tema de este apartado. Vamos a ver cmo podemos cambiar el texto que contiene una capa, y escribir en ella, por ejemplo, el contenido de nuestras variables. Para ello, debemos modificar el contenido del tag DIV.
En Caso del Explorer
En el Internet Explorer, podemos accedar al contenido HTML que est en un tag DIV con lo siguiente: document.all.IDDiv.innerHTML = "Aqu va el texto" Donde IDDiv es el identificador de la capa que vamos a modificar. Otra forma de hacer los mismo es: document.all["IDDiv"].innerHTML = "Aqu va el texto"
HTML Dinmico
pg. 28 / 61
IBJ
De esta forma, se evala IDDiv como una ristra, y se convierte en una forma ms til a la hora de hacer una pgina compatible con ambos navegadores.
En Caso del Netscape
Puesto que en el Netscape cada capa define su propio documento, cada una de ellas tiene prcticamente las mismas posibilidades que el documento principal. Si quisisemos reescribir un documento, usaramos la funcin write para el texto, y close para indicar que el proceso de escritura ha finalizado: document.open() document.write("Aqu va el texto") document.close() Pero en el caso concreto de una capa, que es lo que nos interesa, debemos usar el vector layers antes de open, write y close: document.layers["IDDiv"].document.open() document.layers["IDDiv"].document.write("Aqu va el texto") document.layers["IDDiv"].document.close()
Combinando Ambos
Este es otro caso en el que la sintaxis difiere entre ambos navegadores, y se convierte en cdigo susceptible de ser introducido en una funcin genrica que tenga en cuenta el navegador: function Escritura (id,texto,capaReferencia) { var capa if (ns) { if (capaReferencia) capa = eval ('document.'+capaReferencia+'.document.'+id+'.document') else capa = document.layers[id].document capa.open() capa.write(texto) capa.close() } else if (ie) document.all[id].innerHTML = texto }
HTML Dinmico
pg. 29 / 61
IBJ
Con esta funcin implementada, todo lo que tenemos que hacer es indicar la capa a cambiar, y el texto que queramos colocar. capaReferencia indica la capa en la que est situada la capa que queremos modificar. Slo valdra distinto de nulo cuando tuvisemos capas anidadas. Una llamada a esta funcin podra ser: Escritura ("capa", null, "Aqu va el texto")
Ejemplo 26
HTML Dinmico
pg. 30 / 61
IBJ
Ejemplos
Ejemplo 1 <html> <title>Tutorial DHTML - Cross-Browser Javascript - Ejemplos</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false function Comprobar() { if (ns) alert ("Navegador: Netscape Navigator") else if (ie) alert ("Navegador: Internet Explorer") } </script> <body> <center> <H3>Comprobacion del Navegador</H3> </center> <a href="javascript:Comprobar()">Pulsa aqui para ver el navegador que estas usando</a> </body> </html>
Ejemplo 2 <html> <title>Tutorial DHTML - Ejemplos - Mostrar y Ocultar Elementos(1)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false function Mostrar (id) { if (ns) document.layers[id].visibility = "show"
HTML Dinmico
pg. 31 / 61
IBJ
else if (ie) document.all[id].style.visibility = "visible" } function Ocultar (id) { if (ns) document.layers[id].visibility = "hide" else if (ie) document.all[id].style.visibility = "hidden" } </script> <body> <center> <H3>Mostrar y Ocultar Elementos (Sin Identificadores Directos)</H3> </center> <a href="javascript:Mostrar('divGrafico')">Mostrar la grafico</a> <a href="javascript:Ocultar('divGrafico')">Ocultar la grafico</a> <div ID="divGrafico" STYLE="position:absolute; left:50px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 3 <html> <title>Tutorial DHTML - Mostrar y Ocultar Elementos - Ejemplos (2)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var grafico function Inicio() { if (ns) grafico = document.divGrafico else if (ie) grafico = divGrafico.style }
HTML Dinmico pg. 32 / 61 IBJ
function Mostrar (objeto) { if (ns) objeto.visibility = "show" else if (ie) objeto.visibility = "visible" } function Ocultar (objeto) { if (ns) objeto.visibility = "hide" else if (ie) objeto.visibility = "hidden" } </script> <body onLoad="Inicio()"> <center> <H3>Mostrar y Ocultar Elementos (Con Identificadores Directos)</H3> </center> <a href="javascript:Mostrar(grafico)">Mostrar la grafico</a> <a href="javascript:Ocultar(grafico)">Ocultar la grafico</a> <div ID="divGrafico" STYLE="position:absolute; left:50px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 4 <html> <title>Tutorial DHTML - Mostrar y Ocultar Elementos - Ejemplos(3)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var mercurio var jupiter function Inicio() { if (ns)
HTML Dinmico
pg. 33 / 61
IBJ
{ mercurio = document.divMercurio jupiter = document.divJupiter } else if (ie) { mercurio = divMercurio.style jupiter = divJupiter.style } } function AjustaPlaneta (planeta,z) { planeta.zIndex = z } </script> <body onLoad="Inicio()"> <center> <H3>Niveles de Profundidad</H3> </center> Ajustar profundidad de Mercurio a: <a href="javascript:AjustaPlaneta(mercurio,3)">3</a> -<a href="javascript:AjustaPlaneta(mercurio,5)">5</a> - <a href="javascript:AjustaPlaneta(mercurio,7)">7</a> <br> Ajustar profundidad de Jupiter a: <a href="javascript:AjustaPlaneta(jupiter,3)">3</a> - <a href="javascript:AjustaPlaneta(jupiter,5)">5</a> - <a href="javascript:AjustaPlaneta(jupiter,7)">7</a> <div ID="divMercurio" STYLE="position:absolute; left:100px; top:125px; width:400; height:400; z-index:5"> <img src="../../graficos/mercurio.jpg"> </div> <div ID="divJupiter" STYLE="position:absolute; left:50px; top:125px; width:400; height:400; z-index:6"> <img src="../../graficos/jupiter.jpg"> </div> </body> </html>
Ejemplo 5 <html> <title>Tutorial DHTML - Mover Elementos - Ejemplos</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var objetoGrafico
HTML Dinmico
pg. 34 / 61
IBJ
function Inicio() { if (ns) objetoGrafico = document.divGrafico else if (ie) objetoGrafico = divGrafico.style } function Mover1() { objetoGrafico.left = 100 objetoGrafico.top = 300 } function Mover2() { objetoGrafico.left = 200 objetoGrafico.top = 150 } </script>
<body onLoad="Inicio()"> <center> <H3>Mover un Elemento</H3> </center> Mover la grafico hacia la posicion: <a href="javascript:Mover1()">(100,300) </a> <a href="javascript:Mover2()">(200,150) </a> <div ID="divGrafico" STYLE="position:absolute; left:50px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 6 <html> <title>Tutorial DHTML - Animar Elementos - Ejemplos(1)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var objetoGrafico var retardo = 30 var pixels = 3
function Inicio() { if (ns) objetoGrafico = document.divGrafico else if (ie) objetoGrafico = divGrafico.style } function Animar() { if (parseInt(objetoGrafico.left) < 400) { objetoGrafico.left = parseInt(objetoGrafico.left) + pixels setTimeout("Animar()",retardo) } } function Iniciar() { objetoGrafico.left = 200 objetoGrafico.top = 150 } function Retardo (valor) { retardo = valor } function Pixels (valor) { pixels = valor } </script> <body onLoad="Inicio()"> <center> <H3>Animar un Elemento</H3> </center> <a href="javascript:Animar()">Mover la grafico hacia la posicion (400,150)</a> <br> <a href="javascript:Iniciar()">Iniciar posicion </a><br> Colocar retardo entre llamadas a la funcion <b>setTimeout</b> a: <a href="javascript:Retardo(15)">15</a> - <a href="javascript:Retardo(30)">30</a> <a href="javascript:Retardo(60)">60</a> <a href="javascript:Retardo(100)">100</a><br> Numero de pixels a mover en cada llamada: <a href="javascript:Pixels(1)">1</a> - <a href="javascript:Pixels(3)">3</a> <a href="javascript:Pixels(6)">6</a> <a href="javascript:Pixels(10)">10</a> <div ID="divGrafico" STYLE="position:absolute; left:200px; top:150px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div>
HTML Dinmico
pg. 36 / 61
IBJ
</body> </html>
Ejemplo 7 <html> <title>Tutorial DHTML - Animar Elementos - Ejemplos(2)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var objetoGrafico var retardo = 30 var pixels = 3 function Inicio() { if (ns) objetoGrafico = document.divGrafico else if (ie) objetoGrafico = divGrafico.style } function Animar() { if (parseInt(objetoGrafico.left) < 400) { objetoGrafico.left = parseInt(objetoGrafico.left) + pixels objetoGrafico.top = parseInt(objetoGrafico.top) + pixels setTimeout("Animar()",retardo) } } function Iniciar() { objetoGrafico.left = 200 objetoGrafico.top = 200 } function Retardo (valor) { retardo = valor } function Pixels (valor) { pixels = valor }
HTML Dinmico
pg. 37 / 61
IBJ
</script> <body onLoad="Inicio()"> <center> <H3>Movimiento Diagonal</H3> </center> <a href="javascript:Animar()">Mover la grafico hacia la posicion (400,400)</a> <br> <a href="javascript:Iniciar()">Iniciar posicion </a><br> Colocar retardo entre llamadas a la funcion <b>setTimeout</b> a: <a href="javascript:Retardo(15)">15</a> - <a href="javascript:Retardo(30)">30</a> <a href="javascript:Retardo(60)">60</a> <a href="javascript:Retardo(100)">100</a><br> Numero de pixels a mover en cada llamada: <a href="javascript:Pixels(1)">1</a> - <a href="javascript:Pixels(3)">3</a> <a href="javascript:Pixels(6)">6</a> <a href="javascript:Pixels(10)">10</a> <div ID="divGrafico" STYLE="position:absolute; left:200px; top:200px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 8 <html> <title>Tutorial DHTML - Animar Elementos - Ejemplos(3)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var objetoGrafico var retardo = 30 var pixels = 3 var angulo = 60 var incrementoX = 0 var incrementoY = 0 function Radianes(grados) { return (grados*Math.PI) / 180 } function CalculaIncrementos() { incrementoX = pixels*Math.cos(Radianes(angulo)) incrementoY = pixels*Math.sin(Radianes(angulo)) } function Inicio() {
if (ns) objetoGrafico = document.divGrafico else if (ie) objetoGrafico = divGrafico.style CalculaIncrementos() } function Animar() { if (parseInt(objetoGrafico.left) < 400) { objetoGrafico.left = parseInt(objetoGrafico.left) + incrementoX objetoGrafico.top = parseInt(objetoGrafico.top) + incrementoY setTimeout("Animar()",retardo) } } function Iniciar() { objetoGrafico.left = 200 objetoGrafico.top = 175 } function Retardo (valor) { retardo = valor } function Pixels (valor) { pixels = valor CalculaIncrementos() } function Angulo (valor) { angulo = valor CalculaIncrementos() } </script> <body onLoad="Inicio()"> <center> <H3>Animacion con un Angulo Dado</H3> </center> <a href="javascript:Animar()">Mover la grafico hacia la posicion x=400</a> <br> <a href="javascript:Iniciar()">Iniciar posicion </a><br>
HTML Dinmico
pg. 39 / 61
IBJ
Colocar retardo entre llamadas a la funcion <b>setTimeout</b> a: <a href="javascript:Retardo(15)">15</a> - <a href="javascript:Retardo(30)">30</a> <a href="javascript:Retardo(60)">60</a> <a href="javascript:Retardo(100)">100</a><br> Numero de pixels a mover en cada llamada: <a href="javascript:Pixels(1)">1</a> - <a href="javascript:Pixels(3)">3</a> <a href="javascript:Pixels(6)">6</a> <a href="javascript:Pixels(10)">10</a> <br> Angulo del movimiento: <a href="javascript:Angulo(15)">15</a> - <a href="javascript:Angulo(30)">30</a> <a href="javascript:Angulo(45)">45</a> - <a href="javascript:Angulo(60)">60</a> <br> <div ID="divGrafico" STYLE="position:absolute; left:200px; top:175px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 9 <html> <head> <title>Tutorial DHTML - Animaciones con el Ratn - Ejemplos(1)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var pulsado = false var grafico function Inicio() { if (ns) grafico = document.divGrafico if (ie) grafico = divGrafico.style } function Animar() { if (pulsado) { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) } } </SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Grafico Animada a Traves de un Link</H2> </center>
<a href="javascript:void(null)" onMouseDown="pulsado=true; Animar(); onMouseUp="pulsado=false" onMouseOut="pulsado=false">Mover Grafico</A>
return
false;"
<div ID="divGrafico" STYLE="position:absolute; left:100px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 10 <html> <head> <title>Tutorial DHTML - Animaciones con el Raton - Ejemplos(2)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var pulsado = false var grafico function Inicio() { if (ns) grafico = document.divGrafico if (ie) grafico = divGrafico.style } function Animar() { if (pulsado) { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) } } </SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Grafico Animada a Traves de un Link (2)</H2> </center> <a href="javascript:void(null)" onMouseDown="pulsado=true; Animar();">Mover href="javascript:void(null)" onMouseDown="pulsado=false;">Parar Grafico</A> Grafico</A> <a
<div ID="divGrafico" STYLE="position:absolute; left:100px; top:100px; width:100; height:100;">

<img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 13 <html> <head> <title>Tutorial DHTML - Eventos de Teclado - Ejemplos(2)</title> <script language="JavaScript"> document.onkeydown = TeclaPulsada function TeclaPulsada (tecla) { var teclaCodigo = event.keyCode var teclaReal = String.fromCharCode (teclaCodigo) alert("Cdigo de la tecla: " + teclaCodigo + "\nTecla pulsada: " + teclaReal) } </SCRIPT> </HEAD> <body> <center> <H2>Reconocimiento de la Tecla Pulsada en el Explorer</H2> </center> Pulsa una tecla </body> </html>
Ejemplo 14 <html> <head> <title>Tutorial DHTML - Eventos de Teclado - Ejemplos(4)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var grafico function Inicio() {
if (ns) grafico = document.divGrafico else if (ie) grafico = divGrafico.style document.onkeydown = TeclaPulsada if (ns) document.captureEvents(Event.KEYDOWN) } function TeclaPulsada (tecla) { if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) Animar() } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) Animar() } } function Animar() { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) }
</SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Grafico Animada con el Teclado (Primer ejemplo)</H2> </center> Pulsa la <b>m</b> para comenzar el movimiento de la grafico <div ID="divGrafico" STYLE="position:absolute; left:100px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
HTML Dinmico
pg. 43 / 61
IBJ
Ejemplo 15 <html> <head> <title>Tutorial DHTML - Eventos de Teclado - Ejemplos(5)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var grafico var teclaCodigo var activa = false function Inicio() { if (ns) grafico = document.divGrafico else if (ie) grafico = divGrafico.style document.onkeydown = TeclaPulsada document.onkeyup = TeclaSoltada if (ns) document.captureEvents (Event.KEYDOWN | Event.KEYUP) } function TeclaPulsada (tecla) { if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) { activa = true Animar() } } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) { activa = true Animar() } } }
function TeclaSoltada (tecla) {

if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) activa = false } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) activa = false } } function Animar() { if (activa) { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) } }
</SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Grafico Animada con el Teclado (Se detiene al soltar la tecla)</H2> </center> Pulsa la <b>m</b> para comenzar el movimiento de la grafico y suelta la tecla para detenerla <div ID="divGrafico" STYLE="position:absolute; left:100px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 16 <html> <head> <title>Tutorial DHTML - Eventos de Teclado - Ejemplos(6)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var grafico
var teclaCodigo var activa = false function Inicio() { if (ns) grafico = document.divGrafico else if (ie) grafico = divGrafico.style document.onkeydown = TeclaPulsada document.onkeyup = TeclaSoltada if (ns) document.captureEvents (Event.KEYDOWN | Event.KEYUP) } function TeclaPulsada (tecla) { if (ns) { teclaCodigo = tecla.which if ( (teclaCodigo == 109) && !activa) { activa = true Animar() } } else if (ie) { teclaCodigo = event.keyCode if ( (teclaCodigo == 77) && !activa) { activa = true Animar() } } } function TeclaSoltada (tecla) { if (ns) { teclaCodigo = tecla.which if (teclaCodigo == 109) activa = false } else if (ie) { teclaCodigo = event.keyCode if (teclaCodigo == 77) activa = false
} } function Animar() { if (activa) { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) } }
</SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Grafico Animada con el Teclado (Ejemplo Final)</H2> </center> Pulsa la <b>m</b> para comenzar el movimiento de la grafico y suelta la tecla para detenerla <div ID="divGrafico" STYLE="position:absolute; left:100px; top:100px; width:100; height:100;"> <img src="../../graficos/grafico.gif" </div> </body> </html>
Ejemplo 17 <html> <head> <title>Tutorial DHTML - Recorte de Capas - Ejemplos(1)</title> </HEAD> <body> <center> <H2>Recorte de una Capa</H2> </center> Recorte que no afecta a la imagen:<p> <div ID="divImagen1" STYLE="position:absolute; left:50; top:100; clip:rect(0,500,358,0); background-image:URL(..\..\graficos\mar.jpg); image:URL(../../graficos/mar.jpg);repeat:no;"> </div> width:500; height:358; layer-background-
<div ID="letras1" STYLE="position:absolute; left:10; top:480; width:500; height:10;"> Recorte que no permite ver los ultimos 100 pixels de la derecha: </div>
HTML Dinmico
pg. 47 / 61
IBJ
<div ID="divImagen2" STYLE="position:absolute; left:50; top:515; clip:rect(0,400,358,0); background-image:URL(..\..\graficos\mar.jpg); image:URL(../../graficos/mar.jpg); repeat:no;"> </div>
width:500; height:358; layer-background-
<div ID="letras2" STYLE="position:absolute; left:10; top:900; width:750; height:10;"> Capa con la imagen como mosaico (<b>repeat:yes</b>). El recorte solo permite ver los 100 primeros pixels de la nueva imagen. </div> <div ID="divImagen3" STYLE="position:absolute; left:50; top:935; clip:rect(0,600,358,0); background-image:URL(..\..\graficos\mar.jpg); image:URL(../../graficos/mar.jpg); repeat:yes;"> </div> </body> </html> width:700; height:358; layer-background-
Ejemplo 18 <html> <head> <title>Tutorial DHTML - Recorte de Capas - Ejemplos(2)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var imagen function Inicio() { if (ns) imagen = document.divImagen else if (ie) imagen = divImagen.style } function LeeRecorte (objeto,borde) { if (ns) { if (borde=="superior") return objeto.clip.top if (borde=="derecho") return objeto.clip.right if (borde=="inferior") return objeto.clip.bottom if (borde=="izquierdo") return objeto.clip.left }
else if (ie) { var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") if (borde=="superior") return Number(vectorRecorte[0]) if (borde=="derecho") return Number(vectorRecorte[1]) if (borde=="inferior") return Number(vectorRecorte[2]) if (borde=="izquierdo") return Number(vectorRecorte[3]) } } </SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Comprobar los Valores de Recorte</H2> </center> Selecciona el borde de recorte a comprobar: <a href="javascript:alert(LeeRecorte(imagen,'superior'))">superior</a> <a href="javascript:alert(LeeRecorte(imagen,'inferior'))">inferior</a> <a href="javascript:alert(LeeRecorte(imagen,'derecho'))">derecho</a> <a href="javascript:alert(LeeRecorte(imagen,'izquierdo'))">izquierdo</a> <div ID="divImagen" STYLE="position:absolute; left:50; top:100; clip:rect(75,400,250,150); background-image:URL(../../graficos/mar.jpg); image:URL(../../graficos/mar.jpg); repeat:no;"> </div> </body> </html> width:500; height:358; layer-background-
Ejemplo 19 <html> <head> <title>Tutorial DHTML - Recorte de Capas - Ejemplos(3)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var imagen function Inicio() {
if (ns) imagen = document.divImagen else if (ie) imagen = divImagen.style } function LeeRecorte (objeto,borde) { if (ns) { if (borde=="superior") return objeto.clip.top if (borde=="derecho") return objeto.clip.right if (borde=="inferior") return objeto.clip.bottom if (borde=="izquierdo") return objeto.clip.left } else if (ie) { var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") if (borde=="superior") return Number(vectorRecorte[0]) if (borde=="derecho") return Number(vectorRecorte[1]) if (borde=="inferior") return Number(vectorRecorte[2]) if (borde=="izquierdo") return Number(vectorRecorte[3]) } } function Recortar (objeto,superior,derecho,inferior,izquierdo) { if (ns) { objeto.clip.top = superior objeto.clip.right = derecho objeto.clip.bottom = inferior objeto.clip.left = izquierdo } else if (ie) objeto.clip = "rect(" + superior + "px " + derecho + "px " + inferior + "px " + izquierdo + "px)" } </SCRIPT> </HEAD> <body onLoad="Inicio()">
<center> <H2>Cambiar los Valores de Recorte</H2> </center> Selecciona el borde de recorte a comprobar: <a href="javascript:alert(LeeRecorte(imagen,'superior'))">superior</a> <a href="javascript:alert(LeeRecorte(imagen,'inferior'))">inferior</a> <a href="javascript:alert(LeeRecorte(imagen,'derecho'))">derecho</a> <a href="javascript:alert(LeeRecorte(imagen,'izquierdo'))">izquierdo</a> <br> Ajustar valores de recorte a (superior,derecho,inferior,izquierdo): <a href="javascript:Recortar(imagen,0,400,358,0)">(0,400,358,0)</a> <a href="javascript:Recortar(imagen,200,420,250,25)">(200,420,250,25)</a> <a href="javascript:Recortar(imagen,0,500,358,0)">(0,500,358,0) - (Imagen Completa)</a> <div ID="divImagen" STYLE="position:absolute; left:50; top:125; clip:rect(0,500,358,0); background-image:URL(../../graficos/mar.jpg); image:URL(../../graficos/mar.jpg); repeat:no;"> </div> </body> </html> width:500; height:358; layer-background-
Ejemplo 20 <html> <head> <title>Tutorial DHTML - Recorte de Capas - Ejemplos(4)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var imagen function Inicio() { if (ns) imagen = document.divImagen else if (ie) imagen = divImagen.style } function LeeRecorte (objeto,borde) { if (ns) { if (borde=="superior") return objeto.clip.top if (borde=="derecho") return objeto.clip.right
if (borde=="inferior") return objeto.clip.bottom if (borde=="izquierdo") return objeto.clip.left } else if (ie) { var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") if (borde=="superior") return Number(vectorRecorte[0]) if (borde=="derecho") return Number(vectorRecorte[1]) if (borde=="inferior") return Number(vectorRecorte[2]) if (borde=="izquierdo") return Number(vectorRecorte[3]) } } function Recortar (objeto,superior,derecho,inferior,izquierdo) { if (ns) { objeto.clip.top = superior objeto.clip.right = derecho objeto.clip.bottom = inferior objeto.clip.left = izquierdo } else if (ie) objeto.clip = "rect(" + superior + "px " + derecho + "px " + inferior + "px " + izquierdo + "px)" } function RecorteRelativo (objeto,superior,derecho,inferior,izquierdo) { if (ns) { objeto.clip.top = LeeRecorte(objeto,'superior') + superior objeto.clip.right = LeeRecorte(objeto,'derecho') + derecho objeto.clip.bottom = LeeRecorte(objeto,'inferior') + inferior objeto.clip.left = LeeRecorte(objeto,'izquierdo') + izquierdo } else if (ie) objeto.clip = "rect("+(this.LeeRecorte(objeto,'superior')+superior)+"px "+(this.LeeRecorte(objeto,'derecho')+derecho)+"px "+Number(this.LeeRecorte(objeto,'inferior')+inferior)+"px "+Number(this.LeeRecorte(objeto,'izquierdo')+izquierdo)+"px)" } </SCRIPT> </HEAD>
HTML Dinmico
pg. 52 / 61
IBJ
<body onLoad="Inicio()"> <center> <H2>Recorte Relativo</H2> </center> Selecciona el borde de recorte a comprobar: <a href="javascript:alert(LeeRecorte(imagen,'superior'))">superior</a> <a href="javascript:alert(LeeRecorte(imagen,'inferior'))">inferior</a> <a href="javascript:alert(LeeRecorte(imagen,'derecho'))">derecho</a> <a href="javascript:alert(LeeRecorte(imagen,'izquierdo'))">izquierdo</a> <br> Ajustar valores de recorte a (superior,derecho,inferior,izquierdo): <a href="javascript:Recortar(imagen,0,400,358,0)">(0,400,358,0)</a> <a href="javascript:Recortar(imagen,200,350,250,25)">(200,350,250,25)</a> <a href="javascript:Recortar(imagen,0,500,358,0)">(0,500,358,0) - (Imagen Completa)</a> <br> Cambiar el valor del borde superior de recorte en: <a href="javascript:RecorteRelativo(imagen,20,0,0,0)">+20</a> <a href="javascript:RecorteRelativo(imagen,-20,0,0,0)">-20</a> <br> Cambiar el valor del borde derecho de recorte en: <a href="javascript:RecorteRelativo(imagen,0,20,0,0)">+20</a> <a href="javascript:RecorteRelativo(imagen,0,-20,0,0)">-20</a> <br> Cambiar el valor del borde inferior de recorte en: <a href="javascript:RecorteRelativo(imagen,0,0,20,0)">+20</a> <a href="javascript:RecorteRelativo(imagen,0,0,-20,0)">-20</a> <br> Cambiar el valor del borde izquierdo de recorte en: <a href="javascript:RecorteRelativo(imagen,0,0,0,20)">+20</a> <a href="javascript:RecorteRelativo(imagen,0,0,0,-20)">-20</a> <div ID="divImagen" STYLE="position:absolute; left:50; top:200; clip:rect(0,500,358,0); background-image:URL(../../graficos/mar.jpg); image:URL(../../graficos/mar.jpg); repeat:no;"> </div> </body> </html> width:500; height:358; layer-background-
Ejemplo 21 <html> <head> <title>Tutorial DHTML - Recorte de Capas - Ejemplos(5)</title> <script language="JavaScript">
HTML Dinmico
pg. 53 / 61
IBJ
var ns = (document.layers)? true:false var ie = (document.all)? true:false var imagen function Inicio() { if (ns) imagen = document.divImagen else if (ie) imagen = divImagen.style } function LeeRecorte (objeto,borde) { if (ns) { if (borde=="superior") return objeto.clip.top if (borde=="derecho") return objeto.clip.right if (borde=="inferior") return objeto.clip.bottom if (borde=="izquierdo") return objeto.clip.left } else if (ie) { var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") if (borde=="superior") return Number(vectorRecorte[0]) if (borde=="derecho") return Number(vectorRecorte[1]) if (borde=="inferior") return Number(vectorRecorte[2]) if (borde=="izquierdo") return Number(vectorRecorte[3]) } } function RecorteRelativo (objeto,superior,derecho,inferior,izquierdo) { if (ns) { objeto.clip.top = LeeRecorte(objeto,'superior') + superior objeto.clip.right = LeeRecorte(objeto,'derecho') + derecho objeto.clip.bottom = LeeRecorte(objeto,'inferior') + inferior objeto.clip.left = LeeRecorte(objeto,'izquierdo') + izquierdo } else if (ie)
HTML Dinmico
pg. 54 / 61
IBJ
objeto.clip = "rect("+(this.LeeRecorte(objeto,'superior')+superior)+"px "+(this.LeeRecorte(objeto,'derecho')+derecho)+"px "+Number(this.LeeRecorte(objeto,'inferior')+inferior)+"px "+Number(this.LeeRecorte(objeto,'izquierdo')+izquierdo)+"px)" } function AnimarRecorte() { if (LeeRecorte(imagen,'derecho') > 100) { RecorteRelativo (imagen,0,-10,0,0) setTimeout ("AnimarRecorte()",30) } } function RestaurarImagen() { if (LeeRecorte(imagen,'derecho') < 500) { RecorteRelativo (imagen,0,10,0,0) setTimeout ("RestaurarImagen()",30) } }
</SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Recorte Animado</H2> </center> <a href="javascript:AnimarRecorte()">Animar borde derecho de recorte</a> <br> <a href="javascript:RestaurarImagen()">Restaurar imagen</a> <div ID="divImagen" STYLE="position:absolute; left:50; top:125; clip:rect(0,500,358,0); background-image:URL(../../graficos/mar.jpg); image:URL(../../graficos/mar.jpg); repeat:no;"> </div> </body> </html> width:500; height:358; layer-background-
Ejemplo 22 <html> <head> <title>Tutorial DHTML - Cambiar Imagenes - Ejemplos(1)</title> <script language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false
PreCarga ('Interrogante','../../graficos/interrogante.gif') PreCarga ('Despertador','../../graficos/despertador.gif') function PreCarga (objetoImagen, rutaImagen) { if (document.images) { eval (objetoImagen +' = new Image()') eval (objetoImagen +'.src = "' + rutaImagen + '"') } } function MuestraInterrogante() { if (ns) document.divImagen.document.images["miImagen"].src = Interrogante.src if (ie) document.images["miImagen"].src = Interrogante.src } function MuestraDespertador() { if (ns) document.divImagen.document.images["miImagen"].src = Despertador.src if (ie) document.images["miImagen"].src = Despertador.src } </SCRIPT> </HEAD> <body> <center> <H2>Cambiar Imagenes</H2> </center> <a href="javascript:MuestraInterrogante()">Cambiar a imagen del Interrogante</a> <br> <a href="JavaScript:MuestraDespertador()">Cambiar a imagen del Despertador</a> <div ID="divImagen" style="position:absolute; left:50; top:200; width:75;"> <img name="miImagen" src="../../graficos/interrogante.gif"> </div> </body> </html>
Ejemplo 23 <html> <head> <title>Tutorial DHTML - Cambiar Imagenes - Ejemplos(2)</title>
HTML Dinmico
pg. 56 / 61
IBJ
<script language="JavaScript"> function PreCarga (objetoImagen, rutaImagen) { if (document.images) { eval (objetoImagen +' = new Image()') eval (objetoImagen +'.src = "' + rutaImagen + '"') } } function CambiarImagen (capa,nombreImagen,objetoImagen) { if (document.layers && capa!=null) eval('document.' + capa + '.document.images["' + nombreImagen + '"].src = ' + objetoImagen + '.src') else document.images[nombreImagen].src = eval(objetoImagen + ".src") } PreCarga ('Interrogante','../../graficos/interrogante.gif') PreCarga ('Despertador','../../graficos/despertador.gif') </SCRIPT> </HEAD> <body> <center> <H2>Cambiar Imagenes</H2> </center> <a href="JavaScript:CambiarImagen Interrogante</a> <br> <a href="JavaScript:CambiarImagen Despertador</a> ('divImagen','miImagen','Interrogante')">Cambiar ('divImagen','miImagen','Despertador')">Cambiar a a imagen imagen del del
<div ID="divImagen" style="position:absolute; left:50; top:200; width:75;"> <img name="miImagen" src="../../graficos/interrogante.gif"> </div> </body> </html>
Ejemplo 24 <html> <head> <title>Tutorial DHTML - Cambiar Imagenes - Ejemplos(3)</title> <script language="JavaScript"> function PreCarga (objetoImagen, rutaImagen) { if (document.images)
{ eval (objetoImagen +' = new Image()') eval (objetoImagen +'.src = "' + rutaImagen + '"') } } function CambiarImagen (capa,nombreImagen,objetoImagen) { if (document.layers && capa!=null) eval('document.' + capa + '.document.images["' + nombreImagen + '"].src = ' + objetoImagen + '.src') else document.images[nombreImagen].src = eval(objetoImagen + ".src") } PreCarga ('Interrogante','../../graficos/interrogante.gif') PreCarga ('Despertador','../../graficos/despertador.gif') </SCRIPT> </HEAD> <body> <center> <H2>Cambiar Imagenes con el Raton</H2> </center> Coloca el raton sobre la imagen para cambiarla. <div ID="divImagen" style="position:absolute; left:50; top:150;"> <a href="javascript:void(null)" onMouseOver="CambiarImagen('divImagen','miImagen','Despertador')" onMouseOut="CambiarImagen('divImagen','miImagen','Interrogante')"> <img name="miImagen" src="../../graficos/interrogante.gif" border=0> </a> </div>
Ejemplo 25 <html> <head> <title>Tutorial DHTML - Escritura en una Capa - Ejemplos(1)</title> <SCRIPT language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var texto function Inicio() { if (ns) texto = document.divTexto else if (ie)
texto = divTexto.style } function CambiaX (x) { texto.left = x } function CambiaY (y) { texto.top = y } </SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Texto dentro de una Capa</H2> </center> Colocar el texto en el pixel x = <a href="JavaScript:CambiaX(50)">50</a> href="JavaScript:CambiaX(100)">100</a> - <a href="JavaScript:CambiaX(200)">200</a> <br> Colocar el texto en el pixel y = <a href="JavaScript:CambiaY(150)">150</a> href="JavaScript:CambiaY(175)">175</a> - <a href="JavaScript:CambiaY(250)">250</a> <a <a
<div ID="divTexto" style="position:absolute; left:100; top:100; width:50; background-color:red; layerbackground-color:red;"> Este texto que estas leyendo esta dentro de una capa </div> </body> </html>
Ejemplo 26 <html> <head> <title>Tutorial DHTML - Escritura en una Capa - Ejemplos(2)</title> <SCRIPT language="JavaScript"> var ns = (document.layers)? true:false var ie = (document.all)? true:false var sol1 = "1" var sol2 = "1" function Inicio() { Escritura ("divSol1",sol1,null) Escritura ("divSol2",sol2,null) }
function Escritura (id,texto,capaReferencia) { var capa if (ns) { if (capaReferencia) capa = eval ('document.'+capaReferencia+'.document.'+id+'.document') else capa = document.layers[id].document capa.open() capa.write(texto) capa.close() } else if (ie) document.all[id].innerHTML = texto } function CambiaSol(solucion,numero) { if (solucion == 1) { Escritura ("divSol1",numero,null) sol1 = numero } if (solucion == 2) { Escritura ("divSol2",numero,null) sol2 = numero } } function Comprueba () { if ( (sol1 == "6") && (sol2 == "3") ) alert (" Enhorabuena, sabes operar !!") else // fallo en alguno { if ( (sol1 != "6") && (sol2 != "3") ) // fallo en las dos alert ("Ests de broma? Te has equivocado en ambas operaciones") else // fallo en solo una de las dos { if (sol1 != "6") alert ("Te has equivocado en la multiplicacin. Vuelve a intentarlo") if (sol2 != "3") alert ("Te has equivocado en la divisin. Vuelve a intentarlo") } } }
HTML Dinmico
pg. 60 / 61
IBJ
</SCRIPT> </HEAD> <body onLoad="Inicio()"> <center> <H2>Cambiar el Texto Dentro de una Capa</H2> </center> Vamos a ver que tal se te dan las matematicas. <div ID="divOperacion1" style="position:absolute; left:100; top:200; width:50; background-color:red; layerbackground-color:red;"> 3x2= </div> <div ID="divSol1" style="position:absolute; left:155; top:200; width:15; background-color:red; layerbackground-color:red;"> </div> <div ID="conjunto1" style="position:absolute; left:200; top:110; width:15;"> <a href="JavaScript:CambiaSol(1,'0')">0</a> <br> <a href="JavaScript:CambiaSol(1,'1')">1</a> <br> <a href="JavaScript:CambiaSol(1,'2')">2</a> <br> <a href="JavaScript:CambiaSol(1,'3')">3</a> <br> <a href="JavaScript:CambiaSol(1,'4')">4</a> <br> <a href="JavaScript:CambiaSol(1,'5')">5</a> <br> <a href="JavaScript:CambiaSol(1,'6')">6</a> <br> <a href="JavaScript:CambiaSol(1,'7')">7</a> <br> <a href="JavaScript:CambiaSol(1,'8')">8</a> <br> <a href="JavaScript:CambiaSol(1,'9')">9</a> <br> </div> <div ID="divOperacion2" style="position:absolute; left:400; top:200; width:50; background-color:red; layerbackground-color:red;"> 9/3= </div> <div ID="divSol2" style="position:absolute; left:455; top:200; width:15; background-color:red; layerbackground-color:red;"> </div> <div ID="conjunto2" style="position:absolute; left:500; top:110; width:15;"> <a href="JavaScript:CambiaSol(2,'0')">0</a> <br> <a href="JavaScript:CambiaSol(2,'1')">1</a> <br> <a href="JavaScript:CambiaSol(2,'2')">2</a> <br> <a href="JavaScript:CambiaSol(2,'3')">3</a> <br> <a href="JavaScript:CambiaSol(2,'4')">4</a> <br> <a href="JavaScript:CambiaSol(2,'5')">5</a> <br> <a href="JavaScript:CambiaSol(2,'6')">6</a> <br> <a href="JavaScript:CambiaSol(2,'7')">7</a> <br> <a href="JavaScript:CambiaSol(2,'8')">8</a> <br> <a href="JavaScript:CambiaSol(2,'9')">9</a> <br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <center> <a href="JavaScript:Comprueba()"> Comprueba Resultados </center> </body> </html>
HTML Dinmico
pg. 61 / 61
IBJ

HTML Dinámico

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Dinámico

Загружено:

Авторское право:

Доступные форматы

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Mostrar y Ocultar Elementos

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Funciones sin Identificadores Directos

Donde IDDiv es el identificador de la capa que queramos modificar.

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Funciones con Identificadores Directos

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Animar un elemento con un ngulo dado

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Animaciones con el Ratn

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

En caso del Explorer

Ejemplo 12 (Slo Explorer) Combinando Ambos

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Animando Elementos con el Teclado

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

function Animar() { grafico.left = parseInt (grafico.left) + 3 setTimeout("Animar()",30) }

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Comprobar Valores de Recorte

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Ajustar Valores de Recorte

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Valores Relativos de Recorte

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba

Ingeniera en Sistemas Computacionales

Instituto Tecnolgico de Orizaba