Índice
Para comprender mejor cómo funciona o qué valores tiene en cuenta el navegador y las propias indicaciones de html dinámico pasaremos a indicar la jerarquía de objetos que contiene cualquier página web.
Acceso a los elementos de una colección
Dado que las colecciones de elementos se utilizan para agrupar dichos elementos, tiene sentido disponer de formas de acceder a esos elementos de la colección. Los elementos se pueden extraer de todas las colecciones de HTML Dinámico a través de los tres métodos que se describen a continuación:
| Método de acceso a una colección | Ejemplos | Descripción |
| item(cadenas) | document.all.item("miElemento"); Busca el elemento cuyo nombre se miElemento. Si hubiera más de uno se crea una colección de elementos. |
Proporciona todos los elementos de la colección cuyo nombre o id se especifiquen. Si se proporciona más de un elemento, entonces lo que se proporciona es una colección que contiene esos elementos. |
| item(número) | document.all.item(0); | Proporciona el elemento de la colección que se encuentra en la posición especificada como argumento. |
| marcadores(NombreMarcador) | document.all.tags("P"); Nos encontraremos con una colección de todos los elementos párrafos. |
Proporciona una colección que contiene solamente el marcador especificado. |
Para conocer la longitud de una colección usaremos la propiedad length , la cual nos indicará cuántos elementos tenemos de las mismas características. Por ejemplo:
var parrafos=document.all.tags("P");
alert(parrafos.length);
Los elementos que se proporcionan mediante colecciones en HTML Dinámico son los mismos elementos HTML Dinámico que uno está acostumbrado a tratar en el HTML habitual. La diferencia es que ahora se trata de objetos que uno puede manipular y a partir de los cuales puede uno proporcionar información.
| Propiedad | Descripción |
| document | El documento que contiene este elemento |
| id | La id de este elemento |
| left | La posición de este elemento con respecto al borde izquierdo de la ventana. |
| top | La posición de este elemento con respecto al borde superior de la ventana. |
| tagName | El nombre del marcador del cual es un ejemplar este elemento (siempre en mayúsculas). |
| style | Un objeto que contiene el estilo de este elemento. |
| parentElement | El elemento que contiene a este elemento. |
| className | Proporciona la clase especificada para este elemento. |
Además de las propiedades presentes en los elementos, existen también métodos de los cuales se garantiza que todos los elementos van a disponer de ellos. Estos elementos nos permiten efectuar acciones aplicadas al elemento en cuestión, tales como asegurarse de que se visible en ese momento en la ventana del navegador.
Se garantiza que hay dos métodos importantes que estarán presentes en todos y cada uno de los objetos de elementos:
Es la base del modelo de objetos de HTML Dinámico. El objeto window contiene todo aquello a lo que pueden acceder los programas a través de modelo de objetos: los elementos, los cuadros, las imágenes, la historia de la ventana del navegador y casi cualquier otra cosa a la cual pueda uno necesitar acceder a través del navegador.
| Componentes del objeto window | |
| Colecciones | cuadros |
| Métodos | Item, navigate, blur, focus, alert, confirm, prompt, setTimeout, clearInterval, setInterval, showHelp, execScript, clearTimeout, close, open, scroll, showModalDialog. |
| Propiedades | Document, location, history, navigator, event, visual, client, closed, defaultStatus, dialogArguments, dialogHeight, dialogLeft, dialogTop, dialogWidth, length, name, offscreenBuffering, opener, parent, returnValue, screen, self, status, top, window. |
| Sucesos | Onfocus, onload, onunload, onblur, onhelp, onerror, onbeforeunload, onresize, onscroll. |
Contiene toda la información relativa a la dirección que está visualizando en ese momento la ventana, y todos los detalles de esa dirección (el puerto, el protocolo y demás). Además, este objeto contiene también un método que da lugar a que la página se recargue.
A continuación se detallan las propiedades más importantes de este objeto:
A continuación se detallan los métodos del objeto location:
Este objeto contiene todas las URL que haya visitado el usuario durante una sesión. Admite la propiedad length y especifica el total de URL que están contenidas en el objeto historia actual.
Contiene tres métodos: back() (atrás), forward() (adelante) y go(posición) donde posición es un valor numérico o la URL que hemos visitado anteriormente.
El objeto screen nos permite recuperar información del monitor o pantalla sobre la que se está trabajando. Disponemos de las propiedades siguientes:
El objeto navigator hace posible acceder a información general con respecto al programa navegador. Es importante determinar durante la ejecución lo que admite y lo que no admite el navegador, además de poder tomar decisiones basadas en el navegador que se esté ejecutando.
En algunos casos un navegador no admite cierta funcionalidad que admite otro. Por consiguiente, quizá sea conveniente comprobar por anticipado si la funcionalidad que se desea existe antes de utilizarla.
Este objeto admite cinco propiedades importantes:
Este objeto pone a nuestra disposición información relativa al suceso actual que se esté procesando. Un suceso es la forma de indicarnos del navegador que el usuario está interaccionando con el navegador.
El objeto event tiene disponible las propiedades siguientes:
Éste objeto contiene toda la información relativa al documento HTML. En esto se incluyen todos los marcadores del documento, las colecciones de todos los tipos comunes de elementos y los métodos para acceder al contenido textual del documento.
Se puede acceder a éste objeto de dos maneras. La primera y más correcta para acceder a él es a través del objeto window (recordemos que el objeto document está contenido en el objeto window): window.document.all.
Por compatibilidad con los navegadores más antiguos existe un método alternativo para acceder al objeto document mediante el uso de la palabra reservada document en sí: document.all.
OBJETO DOCUMENT |
|
Colecciones |
anchors, links, forms all, applets, frames, scripts, embeds, plugins. |
Métodos |
close, open, clear, write, writeln, rangeFromText, rangeFromElement, execCommand, queryCommandEnabled, qqueryCommandText, queryCommandIndterm, createElement. |
Propiedades |
alinkColor, linkColor, vlinkColor, mimeType, title, bgColor, link, vLink, aLink, cookie, lastModified, charset, location, referrer, fgColor, activeElement, strReadyState, domain, URL, fileSize, fileCreatedDate, fileModifiedDate, fileUpdatedDate. |
Sucesos |
onclick, onmouseover, ondblclick, onkeypress, onmousedown, onmousemove, onmouseup, onkeydown, onkeyup, onmouseout, onreadystatechange, onhelp, onbeforeupdate, onafterupdate. |
Además, el objeto document tiene también una gran cantidad de información útil acerca del documento en sí, y que se expone mediante las propiedades del objeto document. La lista siguiente examina más detalladamente algunas de las propiedades más importantes:
La información relativa al texto que haya marcado el usuario en ese momento con el ratón estará disponible en el objeto selection. Esto puede ser útil si uno desea realizar alguna acción basándose en lo que haya seleccionado el usuario, quizá para marcarlo o para modificar su tipo de letra.
Este objeto sólo tiene una sola propiedad, type, que define el tipo de selección. Esto puede tomar dos valores: 0 si no hay un punto de inserción en la selección, ó 1 si la selección es una selección de texto y existe realmente un punto de inserción.
Este objeto posee los tres métodos siguientes:
Este objeto contiene información acerca de los elementos de HTML de que consta la parte visible del documento HTML en la ventana actual de navegador. Este objeto se corresponde con el elemento BODY en el documento HTML.
Estas son las propiedades contenidas en el objeto body:
ejemplo:
<h2 id="MiEncabezado">Este es mi encabezadoz</h2>.
MiEncabezado.outerText="<b>¡Esto ya no es un encabezado!</b>";
Se modificaría el marcador <H2> para ser: <b id="MiEncabezado">¡Esto ya no es un encabezado!</b>.
A continuación se muestran los métodos contenidos en el objeto body:
COLECCIÓN ALL (Internet Explorer)
La colección all es posiblemente la parte más importante del objeto document. Se trata del lugar en que se almacenan todos los elementos que forman el documento.
La forma más sencilla de utilizar la colección all es acceder a un elemento del documento a través de su id. P.e.: supongamos que se tiene el marcador siguiente en el documento HTML:
<p id=parraprin style="font-wight:italic">HTML Dinámico</p>
Entonces se podría acceder a ese elemento mediante la colección document.all empleando la id del marcador:
var elemento=document.all("parraprin")
Para verificar que ahora se tiene seleccionado el elemento correcto, se utiliza una expresión lógica en una sentencia if:
if(parraprin==elemento)
document.write("Seleccionado el elemento correcto");
Si se desea acceder a los elementos de la página de forma más general, se pueden seleccionar los elementos a través del método tags() de la colección. Por consiguiente, si se desea hallar todos los casos del marcador <H1> que aparezcan dentro de un documento, se puede utilizar el código siguiente:
var todosH1 = document.all.tags("H1");
En el objeto document.all, siempre estarán presentes varios elementos, aún cuando no se especifiquen explícitamente en el documento HTML. Se conocen con el nombre de elementos implícitos. Los cuatro elementos implícitos son:
La colección anchors contiene todos aquellos elementos que contengan el marcador <A>. Los marcadores de posición suelen utilizarse normalmente en documentos para especificar hiperenlaces.
La colección applets es un nombre relativamente incorrecto para lo que realmente contiene. A partir del nombre, uno pensaría que la colección applets solamente va a contener applets y en particular applets de Java.
En lugar de hacer esto, la colección applets contiene lo que Microsoft define como todos los objetos del documento. Una vez más, esto induce a confusión, por cuanto ya está definido un marcador <OBJECT> en HTML Dinámico, y el significado de la colección applets es más extenso que únicamente los elementos que utilicen el marcador <OBJECT>.
Los objetos contenidos en la colección applets son los siguientes:
Esta colección contiene todos los formularios que estén presentes en el documento. Se define un formulario como un elemento que utiliza el marcador <FORM> de HTML. HTML Dinámico permitirá situar controles de interfaz de usuario fuera del formulario, pero es importante tener en cuenta que estos controles no están presentes en la colección forms.
Contiene todas las imágenes del documento. Se define una imagen como un elemento que haga uso del marcador <IMG> de HTML.
Contiene todos los hiperenlaces del documento. Esta colección contiene todos los elementos de la colección anchors, más los elementos que utilicen el marcador <AREA>.
Contiene todos los marcos o cuadros del documentoy que se están visualizando en el navegador. Es importante tener en cuenta que lo que contiene la colección frames no son los elementos de los marcos en sí, sino los objetos de tipo ventana apropiados a esos marcos. Los cuadros se consideran como ventanas en sí en HTML, así que esta colección contiene elemento window en lugar de los objetos del elemento cuadro en sí.
Consideremos un ejemplo: supongamos que se desea recuperar el nombre del primer cuadro contenido en la ventana actual. Se utilizaría el código siguiente:
window.document.frames(0).name;
Contiene todos los guiones del documento. Los guiones en sí están representados y se pueden recuperar como texto puro.
Contiene todo el contenido incrustado (aditamentos) del documento. Los aditamentos son programas que se han integrado con el navegador para incrementar su funcionalidad. Por ejemplo el Real Audio Player.
Es un alias de la colección embeds.
Contiene todos los filtros multimedia de HTML Dinámico correspondientes a ese documento. Los filtros hacen posible modificar sobre la marcha el aspecto visible de cualquier elemento. Por ejemplo, existe un filtro de difusión que da lugar a que el contenido de un elemento se vuelva difuso.
La colección styleSheets contiene todas las hojas de estilos para este documento. Se tiene una hoja de estilo para cada aparición de un LINK o de un elemento de estilo en el documento.
El objeto TextRange se utiliza para representar áreas de texto pertenecientes al documento.
Ejemplo:
<body>
<h1>Ejemplo</h1>
<h2>TextRange</h2>
<p><b>Este ejemplo examina los intervalos de tiempo</b>
</body>
Si creásemos un objeto del tipo TextRange para el marcador <body>, contendría el siguiente valor:
"Ejemplo TextRange Este ejemplo examina los intervalos de tiempo".
Los sucesos de ratón están relacionados todos ellos con que el usuario lleve a cabo algún tipo de acción con el ratón. El usuario puede efectuar dos tipos generales de acciones con el usuario: pulsar con uno de los botones del ratón o desplazar el puntero del ratón dentro de la ventana del navegador.
HTML Dinámico siempre recuerda el último elemento por encima del cual haya estado el puntero del ratón antes de entrar en el elemento actual. El objeto que representa a este elemento está disponible en el objeto window.event en la forma window.event.fromElement.
HTML Dinámico siempre recuerda el siguiente elemento en el que entra el puntero del ratón después de abandonar el elemento que recibe el suceso onmouseout. El objeto que representa este elemento está disponible en el objeto window.event en la forma window.event.toElement.
Son los sucesos que se generan siempre que el usuario pulsa una tecla del teclado. Existen sucesos no sólo para la acción de pulsar una tecla en el teclado, sino también para pulsar la tecla y para soltar la tecla.
Estos sucesos son los siguientes:
Además, las propiedades altKey, ctrlKey y shiftKey están disponibles en el objeto window.event. Cada una de ellas es una propiedad booleana que recibe el valor verdadero si la tecla del modificador correspondiente ha sido pulsada al mismo tiempo que la tecla que diera lugar al suceso.
Estos sucesos proporcionan información general acerca de la forma en que el usuario interactúa con el documento. Estos documentos son especiales porque nos están notificando ciertas acciones que normalmente no indican a la aplicación que se necesita una respuesta. Sin embargo, quizás sea necesario seguir la pista de todas las acciones realizadas por el usuario, así que tener acceso a estos sucesos podría ser bastante útil.
Los sucesos focus se generan cuando un usuario indica a la aplicación que está interactuando con un cierto elemento de la página.
Los sucesos selection se generan cuando el usuario arrastra el ratón por encima de elementos de la página HTML. Cada vez que el usuario pulsa y arrastra el ratón por encima de un cierto intervalo de elementos de la página, se generan sucesos de selección.
A continuación se muestran sucesos relacionados con las consideraciones anteriores:
El estado del documento refleja la proporción de documento que ya se ha cargado. Dado que las conexiones de Internet varían en lo tocante a la velocidad de conexión, la cantidad de tiempo necesaria para cargar un documento no se conoce por anticipado. Estos sucesos hacen posible averiguar en qué parte de ese proceso se encuentra el documento actual.
Cuando se desencadena un suceso debe existir una función o una instrucción en javascript que recoja y gestione dicho suceso.
La gestión de sucesos en HTML Dinámico se efectúa de forma muy parecida a las versiones anteriores de HTML que admitían los guiones en línea, pero con muchas extensiones importantes. Los guiones se pueden asociar a cualquier elemento de HTML, o incluso al documento en sí.
El aspecto más importante que hay que considerar es el lugar al que uno quiere que vaya la información. En este aspecto se tienen muchas opciones. Se puede hacer que el suceso sea gestionado por los componentes siguientes:
De momento, considérese la definición de los gestores de sucesos basados en elementos individuales. En este procedimiento, la forma más directa de definir un gestor de sucesos es incluirlo a través de atributos en línea, empleando la sintaxis siguiente:
<nombremarcador tipo_suceso="gestor_sucesos()">
El siguiente código aplica la plantilla para desencadenar un suceso cuando el usuario pulsa en el elemento y también para invocar la función AlerTemos de JavaScript cuando se pulsa con él en el ratón:
<h1 onclick="AlerTemos();">Algún
texto de encabezado.</h1>
function AlerTemos() {
alert("Se ha pulsado en un elemento de Encabezado de
Texto");
}
Ahora, cada vez que el usuario pulse en el elemento <H1> con el ratón, se produce las secuencia siguiente:
Ejemplo completo:
<html>
<head>
<title>Ejemplo de gestión de eventos</title>
</head>
<script language="JavaScript">
function AlerTemos() {
alert("Se ha pulsado en un elemento de Encabezado de
Texto");
}
</script>
<body>
<h1 onclick="AlerTemos();">Algún texto de encabezado.</h1>
</body>
</html>
Aun cuando el método de enlazado de gestores de sucesos a sucesos pertenecientes a elementos es bastante natural, HTML Dinámico es en realidad bastante flexible en la forma en la que nos permite enlazar sucesos.
Tres de las formas de enlazar una función con un suceso son:
Hay que identificar el elemento o etiqueta que se va a tratar o gestionar:
Ejemplo: <img id="miImg" src="imagen.gif">
A partir de este momento se gestionaría el evento de la siguiente manera:
<script for=id event="tipo_suceso"
language="Javascript">
// código que hay que ejecutar cuando
// se desencadene el suceso.
</script>
Ejemplo: tenido la etiqueta descrita anteriormente, el for event sería:
<script for="miImg"
event="onclick()" language="JavaScript">
// El mismo código que habría formado la función
// imgClick() en el ejemplo anterior de enlazado
// a través de un elemento.
</script>
Cuando se pasan sucesos, no se pasa mucha información junto con ellos. Por ejemplo, el suceso keypress solamente nos indica que se ha pulsado una tecla pero no la tecla concreta que se ha pulsado.
Dado que esta información no se pasa directamente, tiene que existir una forma alternativa de obtenerla. Esta información, y mucha más, queda a nuestra disposición mediante el objeto event, que es un descendiente del objeto window dentro del modelo de objetos de HTML Dinámico que se describía anteriormente. Se puede acceder al objeto event como a un objeto contenido en el objeto window (window.event).
Propiedades del objeto event:
Ejemplo:
<html>
<body>
<div id=Uno>
<h1> la imagen</h1>
<img src="imagen.gif">
</div>
</body>
</html>
El burbujeo de sucesos es el proceso de recorrido ascendente de esta jerarquía de contención, comenzando por el elemento que reciba el suceso. Supongamos que se pulsa en el marcador <H1>. Entonces el navegador lleva a cabo las siguientes acciones:
La propiedad window.event.srcElement permite obtener dónde ha comenzado el burbujeo conteniendo el elemento HTML que recibiera por primera vez el suceso antes de que empezara a ascender.
MODIFICACIÓN DE LAS PROPIEDADES DE STYLE
MODIFICACIÓN DE ESTILOS DE TIPOS DE LETRA
La preparación de un estilo dinámico comienza por el objeto style. La propiedad font pertenece al objeto style y posee los valores siguientes: tamaño y tipo. Los elementos que se emplean en los ejemplos de esta sección heredan sus propiedades de la siguiente manera:
Style à Font à size, face
Por ejemplo: mitexto corresponde a la ID del elemento que se está especificando, style se refiere al objeto y color se refiere al valor. A continuación se muestra una función en JavaScript:
function cambio_tipo_texto() {
mitexto.style.face="serif";
}
Para cambiar el color à mitexto.style.color="red";
MODIFICACIÓN DEL TAMAÑO DE UN TIPO DE LETRA
Para indicar el tamaño de letra de un objeto usaremos la propiedad fontSize de Style. A continuación se muestra un ejemplo del cambio dinámico:
<script language="JavaScript">
function agrandar_texto() {
mitexto.style.fontSize="5";
}
function petit_texto() {
mitexto.style.fontSize="2";
}
</script>
<div id=mitexto style="font-size=2; color=blue; font-family=sans-serif"
onmouseover="agrandar_texto();" onmouseout="petit_texto();">
¡Esto es un cambio dinámico de tamaño!
</div>
MOSTRAR Y OCULTAR ELEMENTOS
La capacidad de ocultar y revelar selectivamente elementos en nuestras páginas es una parte esencial de HTML Dinámico. Con la capacidad de seleccionar a nuestro arbitrio los elementos del centro que se muestran y cuando se le muestran a nuestra audiencia, se pueden crear nuevas interfaces de usuario y nuevas interacciones con el usuario que no eran posibles antes de HTML Dinámico.
Para conseguir este efecto, el objeto style tiene una propiedad llamada visibility cuyos valores pueden ser o hidden (oculto) o visible.
Ejemplo:
<script language="JavaScript">
function verse() {
imagen.style.visibility="visible";
}
function ocultar() {
imagen.style.visibility="hidden";
}
</script>
<div style="color:blue; font-family:sans-serif;"
onmouseover="verse();" onmouseout="ocultar();">
¡Para por encima del texto, y desaparezco!
</div>
<p>
<div id=imagen style="visibility:hidden;">
<img src="imagen.gif">
</div>
NOTA: En Netscape, hasta la versión 4.5 y Mozilla, existe un objeto que depende directamente de document.layers[layer o div] que actúa de forma similar. Únicamente que para ocultar un objeto se usa la palabra hide y para visualizarlo se usa show.
ESQUEMAS COLAPSABLES
Un efecto del que se puede pensar, utilizando los elementos ya conocidos, es la idea de un esquema que se colapse.
Este tipo de visualización en esquema podría ser una herramienta de navegación interesante, pero para grandes centros se podría volver rápidamente tan grande que su utilidad sería limitada. Una forma de evitar este inconveniente es mostrar únicamente encabezados principales hasta que el usuario pulse en un encabezado de su elección. Empleando esta convención, los usuarios no tendrían que recorrer páginas dedicadas a usuarios comerciales para llegar a la página de atención al cliente.
<!doctype html public "-//w3c//dtd html
4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.73 [es] (X11; I; Linux
2.2.15-4mdksecure i686) [Netscape]">
<title>Ejemplo de uso de cgi.</title>
<!-- meta http-equiv="refresh"
content="10;URL=http://192.168.100.1/cgi-bin/espia.cgi" -->
<script language="javascript">
var incremento=40;
var encoger=new Array(false,false,false);
var es_layers = (document.layers) ? true:false;
var es_ie = (document.all) ? true:false;
var browser = ((es_layers || es_ie) && parseInt(navigator.appVersion)>=4);
function convierte(parametro,signo) {
var local;
local=parseInt(parametro);
if(signo)
local+=incremento;
else
local-=incremento;
return local;
}
function extiende(cual) {
var local, otro;
if(cual==1) {
encoger[cual-1]=!encoger[cual-1];
if(encoger[cual-1]) {
dos.style.top=convierte(dos.style.top,true);
tres.style.top=convierte(tres.style.top,true);
dosuno.style.top=convierte(dosuno.style.top,true);
dosdos.style.top=convierte(dosdos.style.top,true);
} else {
dos.style.top=convierte(dos.style.top,false);
tres.style.top=convierte(tres.style.top,false);
dosuno.style.top=convierte(dosuno.style.top,false);;
dosdos.style.top=convierte(dosdos.style.top,false);
}
unouno.style.visibility=!encoger[cual-1] ? 'hidden':'visible';
unodos.style.visibility=!encoger[cual-1] ? 'hidden':'visible';
}
if(cual==2) {
encoger[cual-1]=!encoger[cual-1];
if(encoger[cual-1])
tres.style.top=convierte(tres.style.top,true);
else
tres.style.top=convierte(tres.style.top,false);
dosuno.style.visibility=!encoger[cual-1] ? 'hidden':'visible';
dosdos.style.visibility=!encoger[cual-1] ? 'hidden':'visible';
}
}
</script>
</head>
<body text="#FFFFFF" bgcolor="#FDEDD2" link="#FF0000"
vlink="#FF0000" alink="#FF0000">
<script language=javascript>
alert("netscape: "+es_layers+" Ie: "+es_ie);
if(es_layers)
alert(document.layers.length);
else
alert(document.all);
</script>
<div id="uno" style="position: absolute;left : 0;top :100;visibility:
visible;"><a href="#" onclick="extiende(1);return false;"
style="text-decoration:none;">Valor uno.</a></div>
<div id="dos" style="position: absolute;left : 0;top :120;visibility:
visible;"><a href="#" onclick="extiende(2);return false;"
style="text-decoration:none;">Valor dos.</a></div>
<div id="tres" style="position: absolute;left : 0;top :140;visibility:
visible;"><a href="#"
style="text-decoration:none;">Valor tres.</a></div>
<div id="unouno" style="position: absolute;left : 0;top :120;visibility:
hidden;"><a href="#"
style="text-decoration:none;"> Valor Uno
Uno.</a></div>
<div id="unodos" style="position: absolute;left : 0px;top
:140px;visibility: hidden;"><a href="#"
style="text-decoration:none;"> Valor Uno
Dos.</a></div>
<div id="dosuno" style="position: absolute;left : 0;top :140;visibility:
hidden;"><a href="#"
style="text-decoration:none;"> Valor Dos
Uno.</a></div>
<div id="dosdos" style="position: absolute;left : 0px;top
:160px;visibility: hidden;"><a href="#"
style="text-decoration:none;"> Valor Dos
Dos.</a></div>
</body>
</html>
POSICIONAMIENTO HEC
Antes de aprender a posicionar y manipular elementos mediante HTML Dinámicos, es importante comprender la tecnología que subyace al posicionamiento de Hojas de Estilo en Cascada. Esta es la tecnología en que se basa el posicionamiento y maquetación de HTML Dinámico; para situar elementos con HTML Dinámico, es preciso utilizarla.
El posicionamiento de Hojas de Estilo en Cascada no forma parte en realidad de la especificación original de HEC. Esto significa que no todos los navegadores que admitan HEC admitirán posicionamiento. Por lo tanto, no es seguro que el posicionamiento cambie siempre que lo hagan las HEC.
POSICIONAMIENTO ABSOLUTO: El posicionamiento absoluto permite definir un "contenedor" en la página Web, en el cual se pueden situar elementos. Al crear un contenedor más pequeño o tela en la página, los diseñadores pueden controlar la forma en que se establecen los elementos en la página.
Por ejemplo:
<div id=posiAbs style="position:absolute;
left; 10%; width:25%; top:10%">
Esto es un párrafo de texto al que se ha dado formato mediante
posicionamiento absoluto.
</div>
POSICIONAMIENTO RELATIVO: Funciona de modo
similar al posicionamiento absoluto. Sigue siendo necesario definir un estilo y crear
entonces un contenedor en el que situaremos nuestros elementos. La diferencia clave es que
el posicionamiento relativo permite trasladar el contenedor. Esto es, se crea un
contenedor de posicionamiento mediante "position:relative" y después se define
el tamaño del contenedor.
Una de las otras diferencias fundamentales entre el
posicionamiento absoluto y el relativo es que los elementos definidos con posicionamiento
relativo se pueden modificar con el lenguaje de guiones.
FLOAT: Esta propiedad se puede utilizar para determinar la forma en que se asociará un elemento a la ventana del navegador. Se podría considerar análogo a ajustar los elementos a la izquierda o derecha. Por ejemplo:
<div id=uno style="float:right; left:10%; width:25%; top:10%">
WIDTH Y HEIGHT: Estas propiedades especifican el tamaño del contenedor de posicionamiento, bien sea con posicionamiento absoluto o relativo. Se pueden usar cualquiera de las medidas admisibles, tales como pulgadas, milímetros, centímetros o píxeles.
TOP Y LEFT: Especifican la situación del contenedor dentro de la página. Se emplean estos valores para indicar la posición inicial de la esquina superior izquierda del contenedor, y siempre se especifican en relación con el lado superior e izquierda de la ventana del navegador.
DESBORDAMIENTO: Para las situaciones de
desbordamiento, utilizaremos la propiedad overflow el cual nos permite un comportamiento
por omisión a la hora de manejar esa información adicional.
Los valores que pueden tomar clip (se limitará a cortar la
información adicional, que no se llegará a visualizarse) y scroll (permitirá al usuario
desplazar el contenido del contenedor para ver toda la información).
Ejemplo:
<div id=despl style="position:absolute; width:100px;height;100px; top:25px;left:25px; overflow:scroll;">
Z-INDEX: Se refiere al orden en que los elementos se van situando "unos sobre otros", en capas. El nombre proviene del sistema de coordenadas cartesianas (X, Y, Z), en donde Z se refiere al eje que controla la profundidadd. El posicionamiento permite crear capas asignando un número de índice Z a los elementos, que determinará su capa efectiva dentro de la página.
(No funciona en Netscape)
Sobre ejemplo:
<html>
<head><title>Ejemplo de página.</title></head>
<body>
<h2>Esto es un ejemplo de página</h2>
<p>Esto es un ejemplo de texto</p>
</body>
</html>
Las páginas de HTML constan de marcadores de HTML, guiones, otros elementos definitorios y el texto de que consta el contenido de la página. Todos los marcadores forman parte de la estructura del documento, mientras que el texto es la parte del documento conocida como "chorro".
El objeto TextRange permite seleccionar un chorro de texto y manipular después el chorro para cambiar el texto que aparece en la página. Los objetos de tipo TextRange se definen empleando el método createTextRange() según se muestra en la siguiente línea:
var unIntervalo=document.body.createTextRange();
Si se invocara este segmento con el ejemplo anterior de código básico en HTML, el objeto TextRange aparecería en la forma:
Esto es un ejemplo de página Esto es un ejemplo de texto
Una vez seleccionado el intervalo de texto, se puede utilizar toda una gama de métodos para manipular el objeto TextRange resultante. Estos métodos pueden seleccionar distintos trozos de texto y pueden ser sustituidos por un nuevo texto, proporcionándose así un verdadero contenido dinámico.
PROPIEDADES Y MÉTODOS DEL OBJETO TEXTRANGE
Propiedades: Las propiedades afectan al texto y al HTML.
Métodos:
Métodos de movimiento del objeto TextRange: Una vez que se ha seleccionado un objeto TextRange, es posible desplazar los puntos inicial y final del intervalo mediante el uso de métodos de movimiento del intervalo. Cuando se usan estos métodos, hay que entender que en realidad no se está desplazando el texto dentro de la página; lo que se está moviendo son los límites del intervalo en sí, afectando por tanto al texto seleccionado.
Ejemplo:
<html>
<head><title>Cambiando y usando TextRange.</title>
<script language=JavaScript>
function sustituirPagina() {
var
intervB=document.body.createTextRange();
// Con este pasteHTML sustituye toda
la página.
//
intervB.pasteHTML("<H1>Texto sustitutivo del contenido de la
página.<H1>");
intervB.moveStart("Word",9);
intervB.text="para manipular
textos.";
}
</script>
</head>
<body onclick="sustituirPagina()">
<h1>Intervalos de Texto</h1>
Todo el texto de esta página se puede seleccionar y sustituir mediante el uso de
intervalos de texto.
</body>
</html>
<html>
<head><title>Cambiando y usando TextRange.</title>
<script language=JavaScript>
function sustituirPagina() {
textual.innerText="Probando,
probando"; // Cambiando con innerText.
}
</script>
</head>
<body onclick="sustituirPagina();">
<h1 id="textual">Intervalos de Texto</h1>
Todo el texto de esta página se puede seleccionar y sustituir mediante el uso de
intervalos de texto.
</body>
</html>
<html>
<head><title>Sustitución de textos.</title>
<script language=JavaScript>
function cambiarTexto() {
cabecera.innerText="¡Se cambia
el texto con una sola pulsación!";
return false;
}
function cambiarMarcador() {
cabecera.outerHTML="<h3>¡Ahora
es un encabezado de nivel 3!</h3>";
return false;
}
</script>
</head>
<body>
<h1 id="cabecera" style="color:red"
onclick="cambiarTexto();"
ondblclick="cambiarMarcador();">Esto es un encabezado de nivel 1</h1>
<p>Pulse en el texto anterior y verá como cambia.</p>
<br>
</body>
</html>
Ejemplo de uso de datos tabulares.
(No funciona con Netscape)
<html>
<head><title>Ejemplo de datos tabulares.</title>
<script language=JavaScript>
function avanzaCoches() {
if(coches.recordset.AbsolutePosition!=
coches.recordset.RecordCount)
coches.recordset.MoveNext();
}
function retrocedeCoches() {
if(coches.recordset.AbsolutePosition>1)
coches.recordset.MovePrevious();
}
</script>
</head>
<body>
<object id="coches"
classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
border="0"
width="0"
height="0">
<param name="DataURL" value="coches.txt">
<param name="UseHeader" value="True">
</object>
<h1 id="cabecera" style="color:red"
onclick="cambiarTexto();" ondblclick="cambiarMarcador();">Esto es
un encabezado de nivel 1</h1>
<p>Pulse en el texto anterior y verá como cambia.</p>
<br>
<form>
<input type=button id=anterior value="<-"
onclick="avanzaCoches()">
<input type=button id=siguiente value="->"
onclick="retrocedeCoches()">
<h1>tipo de coche:</h1>
<input type=text datasrc=#coches datafld="tipo">
<h1>año de coche:</h1>
<input type=text datasrc=#coches datafld="ano">
<h1>precio del coche:</h1>
<input type=text datasrc=#coches datafld="precio">
</form>
</body>
</html>
Con los datos en el archivo coches.txt
tipo,ano:INT,precio:INT
chevy nova,1986,1000
infitini,1993,12000
nissan maxima,1989,4500
ford taurus,1991,6200
toyota camry,1994,8300
honda accord,1995,9200
volvkswagen beetle,1970,800
El escalado de una imagen implica ampliar o reducir la imagen con respecto a su tamaño original. El código que va apareciendo progresivamente está numerado según su posición en el código final. Ejemplo de código:
<html>
<head><title>Multimedia...</title></head>
<script language=javascript>
var dbclick=false;
function escaladoImagen() {
if(dbclick==false) {
if(dameescala.style.pixelWidth<250) {
dameescala.style.pixelWidth+=1;
dameescala.style.pixelHeight+=1;
window.setTimeout("escaladoImagen();",100);
} else
window.clearTimeout;
} else
window.clearTimeout;
}
function bajaescala() {
dbclick=true;
if(dameescala.style.pixelWidth>150) {
dameescala.style.pixelWidth-=1;
dameescala.style.pixelHeight-=1;
window.setTimeout("bajaescala();",100);
} else {
alert("termina dbl");
window.clearTimeout;
}
}
function para() {
dbclick=false;
window.clearTimeout;
}
</script>
<body>
<p>Aquí con acento....</p>camión y castaña
<span style="position:absolute; top:5; left:5; color:red">
Pulse en la imagen para ajustar la escala.</span>
<img id="dameescala" style="position:relative; top:25; left:25;
width:195px;height:171px;" onclick="para();escaladoImagen();"
ondblclick="para();bajaescala();" src="perro.jpg">
</body>
</html>
Microsoft ofrece un cierto número de controles multimedia basados en ActiveX que permiten acceder a algunas transiciones bastante complejas; sin embargo, hay ocasiones en que quizá se desee tan sólo una transición sencilla. Y con probabilidad aún mayor, habrá ocasiones en que no sintamos deseos de pasar por las dificultades que implica ActiveX.
Para crear un efecto de transición, se efectuarán pequeños cambios en el código anterior. En primer lugar, será necesario modificar las sentencias de las funciones que incrementan las propiedades de anchura y altura de tal modo que pasen a decrementarlas en lugar de incrementarlas. Una modificación de sería sustituir DameEscala.style.pixelWidth+=1 por DameEscala.style.pixelWidth-=1.
A continuación, necesitaremos asegurarnos que la imagen desaparezca. Esto se puede conseguir implementando las propiedades overflow y clip. La propiedad overflow controla el modo en que se gestiona el recorte cuando la imagen es demasiado grande para la zona. La propiedad clip hace posible definir una zona de recorte. Por tanto, se añaden estas propiedades al objeto imagen:
<IMG ID="dameescala" STYLE="position: relative; top:25; left:25; width:195px; height:171px; overflow:clip; clip:auto;" onclick=" para(); escaladoImagen();" ondblclick=" para(); bajaescala();" SRC="perro.jpg ">.
Quedaría:
<html>
<head><title>Multimedia...</title></head>
<script language=javascript>
var dbclick=false;
function escaladoImagen() {
if(dbclick==false) {
if(dameescala.style.pixelWidth<250) {
dameescala.style.pixelWidth-=1;
dameescala.style.pixelHeight-=1;
window.setTimeout("escaladoImagen();",100);
} else
window.clearTimeout;
} else
window.clearTimeout;
}
function bajaescala() {
dbclick=true;
if(dameescala.style.pixelWidth>150) {
dameescala.style.pixelWidth+=1;
dameescala.style.pixelHeight+=1;
window.setTimeout("bajaescala();",100);
} else {
alert("termina dbl");
window.clearTimeout;
}
}
function para() {
dbclick=false;
window.clearTimeout;
}
</script>
<body>
<p>Aquí con acento....</p>camión y castaña
<span style="position:absolute; top:5; left:5; color:red">
Pulse en la imagen para ajustar la escala.</span>
<IMG ID="dameescala" STYLE="position: relative; top:25; left:25;
width:195px; height:171px; overflow:clip; clip:auto;" onclick=" para();
escaladoImagen();" ondblclick=" para(); bajaescala();"
SRC="perro.jpg">
</body>
</html>
Ejemplo de código para este uso: (escalado.htm)
<HTML>
<HEAD><TITLE>Una Transición sin ActiveX</TITLE>
<SCRIPT LANGUAGE=JavaScript>
var uno=true;
function escaladoGato() {
if(uno==true) {
if(DameEscala.style.pixelWidth>0) {
DameEscala.style.pixelWidth -=1;
DameEscala.style.pixelHeight -=1;
window.setTimeout("escaladoGato();", 1);
otraEscala();
} else uno=false;
} else {
if(DameEscala.style.pixelWidth<150) {
DameEscala.style.pixelWidth +=1;
DameEscala.style.pixelHeight +=1;
window.setTimeout("escaladoGato();", 1);
otraEscala();
} else uno=true;
}
}
function otraEscala() {
if(uno==true) {
if(DameEscala.style.pixelWidth <
150) {
EscalaDos.style.pixelWidth +=1;
EscalaDos.style.pixelHeight +=1;
}
} else {
if(DameEscala.style.pixelWidth >
0) {
EscalaDos.style.pixelWidth -=1;
EscalaDos.style.pixelHeight -=1;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<SPAN STYLE="position: absolute; top: 210; left:25; color:green;">Pulse en
el perro para convertirlo en calabaza.</SPAN>
<IMG ID="DameEscala" STYLE="position:absolute; top:25; left:25;
width:195px; height:171px; overflow:clip; clip:auto;"
onclick="escaladoGato();" SRC="perro.jpg">
<IMG ID="EscalaDos" STYLE="position:absolute; top:25; left:25;
width:0px; height:0px; overflow:clip; clip:auto;" onclick="escaladoGato();"
SRC="llave.gif">
</BODY>
</HTML>
Arrastrar un elemento de una página, cambiar de posición un elemento basándose en sucesos del ratón y manipular imágenes son todos ellos efectos útiles para construir nuevos diseños de interfases gráficas de usuario. En este ejemplo se va a crear una función que permite al usuario pulsar en una imagen y arrastrarla dentro de una página de la red. Este tipo de interacción se consigue diseñando una función que captura el suceso del ratón cuando se pulsa en la imagen, y que después recupera las coordenadas del puntero del ratón. Estas coordenadas se utilizarán para cambiar la posición de las imágenes dentro de la página.
<HTML>
<HEAD><TITLE>Una Transición sin ActiveX</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function moverObjeto() {
if(window.event.button==1) {
var elementoFuente, nuevoy, nuevox;
elementoFuente=window.event.srcElement; // Objeto sobre el que se ha posicionado el ratón
nuevox=window.event.x-(elementoFuente.width/2);
nuevoy=window.event.y-(elementoFuente.height/2);
elementoFuente.style.posTop=nuevoy;
elementoFuente.style.posLeft=nuevox;
window.event.returnValue=false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<SPAN STYLE="position: absolute; top: 210; left:25;
color:green;">Arrástralo como puedas.</SPAN>
<IMG ID="DameEscala" STYLE="position:absolute; top:25; left:25;
width:125; height:125; z-index:2;" onmousemove="moverObjeto();"
SRC="perro.jpg">
<IMG ID="EscalaDos" STYLE="position:absolute; top:150; left:150;
z-index:1;" onmousemove="moverObjeto();" SRC="llave.gif">
</BODY>
</HTML>
CONTROLES MULTIMEDIA DE ACTIVEX
Los controles multimedia de HTML Dinámico son controles de ActiveX que se pueden utilizar y manipular en conjunción con HTML Dinámico para crear efectos multimedia en tiempo real.
ROTACIÓN DE TEXTOS Y OBJETOS
GRÁFICOS ESTRUCTURADOS
Estos controles gráficos hacen posible generar gráficos en la pantalla empleando técnicas y primitivas gráficas. Esta funcionalidad permite crear complejas imágenes gráficas vectoriales, así como elementos que se pueden manipular fácilmente empleando otros controles multimedia.
EFECTOS DE ANIMACIÓN CON RUTA
Empleando estos controles, se puede realmente crear una ruta que el objeto seguirá en su desplazamiento. Esto permite crear animaciones complejas con gran precisión, y se puede animar cualquier objeto de tal modo que siga una ruta.
TRANSICIONES:
Para hacer valer los valores anteriores (los que están entre paréntesis) deberemos usar la propiedad Transition del elemento que vamos a usar. P.e.: transEx.filters.item(0).Transition=12; // Random Dissolve
Otra forma de usar la propiedad Transition es enviarla como parámetro de la función predeterminada revealTrans(Transition=<id_transicion>). P.e.: revealTrans(Transition=12);
FILTROS:
Los controles FILTER ofrecen características para la manipulación de imágenes, permitiendo a los diseñadores que apliquen efectos a las imágenes dentro de la ventana del navegador, en lugar de tener que cambiar toda una imagen nueva.
HTML Dinámico ofrece varios controles Filter a través de ActiveX. Entre ellos se cuenta los siguientes:
La forma en que se puede activar estos filtros es con el objeto style y la propiedad filter.
Ejemplo:
<HTML>
<HEAD><TITLE>¿ActiveX?.</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
function ComenzarTrans() {
/*
*****************************************************************************************
Comienza el proceso de definición de la transición.
El objeto que contenga la transición mediante la colección de filtros.
Como sólo se ha definido una transición, se necesita el primer elemento de
esta colección que está contenido en "item(0)".
El método Apply() tiene que ser invocado para que comience la transición.
********************************************************************************************
*/
transEx.filters.item(0).Apply();
// Se fija como transición Random Dissolve (12).
transEx.filters.item(0).Transition=12;
// Se preparan los elementos para la transición.
ImageFrm.style.visibility="hidden";
FadeTo.style.visibility="visible";
// Ejecutar la transición.
transEx.filters.item(0).play(5);
}
function rayosX() {
/*
*****************************************************************************************
Parámetros:
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
********************************************************************************************
*/
llave.style.filter="xray(enabled=1)";
}
function Sombra() {
/*
*******************************************************************************************
Parámetros:
offx=Nº píxeles que se desplaza la sombra según el eje X. Si es positivo, la sombra se
desplaza hacia la derecha, sino a la izquierda.
offy=Igual que el anterior. Si es positivo, la sombra se desplaza hacia abajo. Si
negativo, a hacia arriba.
color= Es el color de la sombra, expresado en el formato estándar de HTML (#RRGGBB).
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
*********************************************************************************************
*/
llave.style.filter="dropshadow(offx=10,offy=10,color=#008888,enabled=1)";
}
function invierteH() {
/*
*****************************************************************************************
Parámetros:
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
********************************************************************************************
*/
llave.style.filter="fliph(enabled=1)";
}
function invierteV() {
/*
*****************************************************************************************
Parámetros:
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
********************************************************************************************
*/
llave.style.filter="flipv(enabled=1)";
}
function EscalaGris() {
/*
*****************************************************************************************
Parámetros:
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
********************************************************************************************
*/
llave.style.filter="gray(enabled=1)";
}
function InvertirColor() {
/*
*****************************************************************************************
Parámetros:
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
********************************************************************************************
*/
llave.style.filter="invert(enabled=1)";
}
function CrearLuminosidad() {
/*
*****************************************************************************************
Parámetros:
enabled= 0 si el filtro está inhabilitado, 1 si está habilitado.
Además, tiene los métodos siguientes del objeto item:
addAmbient: Añadir luz de ambiente. Los argumentos son los siguientes:
R: Valor rojo de la luz, expresado como un grado de saturación.
[0..255]
G: Valor verde de la luz, expresado como un grado de saturación.
[0..255]
B: Valor azul de la luz, expresado como un grado de saturación.
[0..255]
strength: La intensidad de la luz que brilla sobre el elemento.
[0..255]
addPoint: Luces puntuales. Los argumentos son los siguientes:
x: La coordenada x de la fuente de luz. El alcance de esta
coordenada dependerá del tamaño del elemento.
y: La coordenada y de la fuente de luz. El alcance de esta
coordenada dependerá del tamaño del elemento.
z: La coordenada z de la fuente de luz. Este valor se corresponde
con la distancia vertical respecto al elemento al que se quiera que esté la fuente de
luz.
R: Valor rojo de la luz, expresado como un grado de saturación. [0..255]
G: Valor verde de la luz, expresado como un grado de saturación. [0..255]
B: Valor azul de la luz, expresado como un grado de saturación. [0..255]
strength: La intensidad de la luz que brilla sobre el elemento. [0..255]
********************************************************************************************
*/
llave.style.filter="light(enabled=1)";
llave.filters.item(0).addAmbient(200,200,255,150);
llave.filters.item(0).addPoint(50,50,25,255,255,255,250);
}
function Distorsion() {
/*
*****************************************************************************************
Parámetros:
direction= Especifica la dirección de movimiento del elemento
difuminado. el valor por omisión es de 0, especifica que se mueve directamente hacia
arriba. los valores posibles se especifican en incrementos de 45 grados en el sentido de
las agujas del reloj (45, 90, 135, 180, 270, 315), en donde 90 indica la derecha, 180 es
hacia abajo, y 270 hacia la izquierda.
estrength= La intensidad que especifica cuántos píxeles se va a
difuminar la imagen. Cuanto mayor sea el parámetro, más difusa resultará la imagen.
add= El parámetro de adición puede recibir o bien el valor 0 o
bien el valor 1. Si le damos el valor 0, la imagen se suma con la imagen difuminada por
movimiento; si se le da el valor 1, sólo se muestra la imagen difuminada por el
movimiento. La imagen resultará más reconocible si se especifica que hay que añadir la
imagen.
enabled= 0 si el filtro está inhabilitado, 1 si está
habilitado.
********************************************************************************************
*/
llave.style.filter="blur(direction=45,strength=15,add=0,enabled=1)";
}
function Opacidad() {
/*
******************************************************************************************
Parámetros:
opacity= El grado de transparencia. 0 es completamente
transparente, mientras que 100 es completamente opaco.
enabled= 0 si el filtro está inhabilitado, 1 si está
habilitado.
*********************************************************************************************
*/
llave.style.filter="alpha(opacity=50,enabled=1)";
}
function Sombreado() {
/*
******************************************************************************************
Parámetros:
color= El color de la silueta, dado en el formato RGB de HTML.
direction= Especifica la dirección de la sombra que se
construirá. El valor por omisión es 0, especifica que apunta exactamente hacia arriba.
los valores posibles se especifican en incrementos de 45 grados en el sentido de las
agujas del reloj (45, 90, 135, 180, 270, 315), en donde 90 indica la derecha, 180 es hacia
abajo, y 270 hacia la izquierda.
enabled= 0 si el filtro está inhabilitado, 1 si está
habilitado.
*********************************************************************************************
*/
llave.style.filter="shadow(color=#ff0088,direction=135,enabled=1)";
}
function Ola() {
/*
*******************************************************************************************
Parámetros:
freq= (frecuencia) es el número de ondas que se desea que
aparezcan en el elemento cuando se ejecute el filtro.
strength= Es la intensidad de las ondas que se aplicarán a la
imagen. Los límites de la intensidad dependen del tamaño del elemento, pero el intervalo
entre 0 y 10 suele producir efectos interesantes.
phase= La fase hace posible establecer un desplazamiento para esa
onda en forma de seno. Los valores disponibles van desde 0 hasta 100, en donde 25
determina una fase de 90 grados.
lightstrength= Permite especificar la intensidad de la luz
aplicada a las ondas, en forma de un porcentaje entre 0 y 100.
add= Puede recibir o bien el valor 0 ó 1. Si es 0, entonces se
añade la imagen a la imagen filtrada por la onda; en caso contrario, sólo se muestran la
imagen filtrada por la onda. Si se especifica que es preciso añadir la imagen, entonces
la imagen será más reconocible.
enabled= 0 si el filtro está inhabilitado, 1 si está
habilitado.
**********************************************************************************************
*/
llave.style.filter="wave(freq=4,strength=6,phase=10,lightstrength=0,add=0,enabled=1)";
}
function SiluetaRadiante() {
/*
*******************************************************************************************
Parámetros:
color= El color de la silueta, dado en el formato RGB de HTML.
strength= La intensidad del brillo que se va a aplicar. [0
(brillo mínimo)..100 (brillo máximo)]
enabled= 0 si el filtro está inhabilitado, 1 si está
habilitado.
**********************************************************************************************
*/
llave.style.filter="glow(color=#ff0000,strengh=50,enabled=1)";
}
function Cromado() {
/* **************************************************************************************
Parámetros:
color= El color que se hará transparente, dado en el formato RGB
de HTML.
enabled= 0 si el filtro está inhabilitado, 1 si está
habilitado.
*****************************************************************************************
*/
llave.style.filter="chroma(color=#ff00ff,enabled=1)";
}
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:rayosX()">Vuelve a rayos X.</a><br>
<a href="javascript:Sombra()">Pulsa para Sombra.</a><br>
<a href="javascript:invierteH()">Pulsa para cambio
horizontal.</a><br>
<a href="javascript:invierteV()">Pulsa para cambio
vertical.</a><br>
<a href="javascript:EscalaGris()">Pulsa Grises.</a><br>
<a href="javascript:InvertirColor()">Pulsa invertir
color.</a><br>
<a href="javascript:CrearLuminosidad()">Pulsa para crear
luminosidad.</a><br>
<a href="javascript:Distorsion()">Pulsa para
Distorsión.</a><br>
<a href="javascript:Opacidad()">Pulsa para Opacidad.</a><br>
<a href="javascript:Sombreado()">Pulsa para Sombreado.</a><br>
<a href="javascript:Ola()">Pulsa para efecto de ola.</a><br>
<a href="javascript:SiluetaRadiante()">Pulsa para Silueta
Radiante.</a><br>
<a href="javascript:Cromado()">Pulsa para un cromado.</a><br>
<DIV id="transEx" style="position:absolute; width:500; height:350;
background-color:black; FILTER:revealTrans()" onclick="ComenzarTrans()">
<img id="ImageFrm" style="position:absolute;
width:500; height:350; top:0; left:0;" src="perro.jpg">
<div id="FadeTo" style="position:absolute;
width:500; height:350; top:0; left:0; background:black; visibility:hidden;">
<img id="llave"
src="llave.gif">
</div>
</DIV>
</BODY>
</HTML>