Introduccion DHTML - Referencias
Curso gratis creado por Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1058.html
18 de Octubre de 2005
HTML, XML
3 - Referencias
La forma de acceder a los valores de los atributos de un elemento depende del browser utilizado. De esta forma, usando por ejemplo código Javasrcipt, podemos modificar esos valores dándole vida al elemento.
Netscape
Para Netscape, la forma de referenciar un atributo es: document.myObject.atribute = value. Si se tienen elementos anidados se deben especificar ambos elementos, como en document.outer.document.inner.left.
Otra forma de acceder a un atributo es utilizando el arreglo de Layers. Así, solo basta conocer el índice adecuado. Consideremos el siguiente código de ejemplo:
<html>
<div id="outer" style="position:absolute">
<div id="inner" style=" "position:absolute; left:50; top:50"> <img src="http://www.tn.cl/icn/flab1.jpg">∞; </div>
</div> </html>
De esta forma, si queremos modificar la imagen, lo podemos hacer de dos formas:
document.outer.document.inner.images[0].src = "otro.gif";
document.layers[0].document.layers[0].images[0].src = "otro.gif";
Explorer
Para Explorer, las referencias a los atributos son distintas en sintaxis, pero tienen la ventaja que cuando se tiene bloques anidados, basta solo con especificar el nombre del bloque, sin especificar el o los bloques exteriores. Por ejemplo, si queremos modificar el atributo Left del elemento inner del ejemplo anterior, basta con colocar:
document.all.inner.style.pixelLeft = 200;
Sobre la propiedad pixelLeft volveremos más tarde. Ahora, si queremos modificar la imagen, solo se referencia al índice del arreglo de im´agenes.
document.images[0].src = "otro.gif";
Como ven, la sintaxis es mucho más fácil y más flexible que para Netscape.
Definición de DIV
Una forma alternativa de definir los atributos de un elemento DIV (antes de ser modificados) es mediante hojas de estilo. La sintaxis es:
<html>
<style type="text/css"> #miObj {position: absolute; left:50; background-color:FFFFDD; width:200} </style>
<body>
<div id="miObj"> Algun Contenido... </div>
</body> </html>
Tabla Resumen
A continuación se muestra una tabla resumen, con las propiedades segun se utilice Netscape o Explorer incluyendo una breve descripción descripción.
Netscape Descripcion Explorer
left Distancia borde izquierdo pixelLeft
top Distancia borde superior pixelTop
clip.height Altura contenido visible -
clip.width Ancho contenido visible -
visibility Muestra o esconde un objeto visibility
zindex Orden de layering del elemento zindex
background Imagen de fondo background
Netscape
Para Netscape, la forma de referenciar un atributo es: document.myObject.atribute = value. Si se tienen elementos anidados se deben especificar ambos elementos, como en document.outer.document.inner.left.
Otra forma de acceder a un atributo es utilizando el arreglo de Layers. Así, solo basta conocer el índice adecuado. Consideremos el siguiente código de ejemplo:
<html>
<div id="outer" style="position:absolute">
<div id="inner" style=" "position:absolute; left:50; top:50"> <img src="http://www.tn.cl/icn/flab1.jpg">∞; </div>
</div> </html>
De esta forma, si queremos modificar la imagen, lo podemos hacer de dos formas:
document.outer.document.inner.images[0].src = "otro.gif";
document.layers[0].document.layers[0].images[0].src = "otro.gif";
Explorer
Para Explorer, las referencias a los atributos son distintas en sintaxis, pero tienen la ventaja que cuando se tiene bloques anidados, basta solo con especificar el nombre del bloque, sin especificar el o los bloques exteriores. Por ejemplo, si queremos modificar el atributo Left del elemento inner del ejemplo anterior, basta con colocar:
document.all.inner.style.pixelLeft = 200;
Sobre la propiedad pixelLeft volveremos más tarde. Ahora, si queremos modificar la imagen, solo se referencia al índice del arreglo de im´agenes.
document.images[0].src = "otro.gif";
Como ven, la sintaxis es mucho más fácil y más flexible que para Netscape.
Definición de DIV
Una forma alternativa de definir los atributos de un elemento DIV (antes de ser modificados) es mediante hojas de estilo. La sintaxis es:
<html>
<style type="text/css"> #miObj {position: absolute; left:50; background-color:FFFFDD; width:200} </style>
<body>
<div id="miObj"> Algun Contenido... </div>
</body> </html>
Tabla Resumen
A continuación se muestra una tabla resumen, con las propiedades segun se utilice Netscape o Explorer incluyendo una breve descripción descripción.
Netscape Descripcion Explorer
left Distancia borde izquierdo pixelLeft
top Distancia borde superior pixelTop
clip.height Altura contenido visible -
clip.width Ancho contenido visible -
- Alto del contenido posHeight
- Ancho del contenido posWidth
visibility Muestra o esconde un objeto visibility
zindex Orden de layering del elemento zindex
background Imagen de fondo background
Valora este capítulo:
Autor y licencia de 'Introduccion DHTML - Referencias'
|
Opiniona sobre 'Introduccion DHTML - Referencias' (0)
Tu nombre debe tener tres caracteres como mínimo.
Es necesario que te des de alta con una cuenta de correo válida.
Es necesario que te des de alta con una cuenta de correo válida.
El contenido del título de tu opinión debe tener tres caracteres como mínimo.
Es obligatorio que selecciones una valoración del recurso.
El contenido del comentario de tu opinión debe tener tres caracteres como mínimo.
Opina sobre este curso gratis |
Wikis relacionados con 'Introduccion DHTML - Referencias'
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea...
Más »
El desarrollar con capas dinámicas DHTML puede hipotecar aspectos fundamentales del site. Compatibilidad, medición de...
Más »
Su estrategia de marketing puede usar el teléfono para vender una parte o la totalidad...
Más »
El diseño web va más allá del diseño gráfico, al influir en él multitud de...
Más »
El el plan integral de marketing es un plan que incluye la publicidad de los...
Más »
![http://www.tn.cl/icn/flab1.jpg">](http://www.tn.cl/icn/flab1.jpg">){kind=link}