|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7
PONGA UN GRÁFICO EN SU VIDA (III)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Escribiendo en una capa padre.-
En los ejemplos anteriores hemos visto cómo se pinta una recta en el cuerpo del documento, creando con ello un documento nuevo; pero a veces nos puede interesar conservar el código original de nuestro documento, y la única forma de hacerlo mediante la técnica anterior sería escribir todo el contenido dentro de la variable grafico (hay medios para emplear document.write() y no tener que sacrificar nuesto código original, pero por ahora vamos a tratar lo más básico, por motivos didácticos).
Para solucionar este escollo podemos, una vez obtenida la variable con el código de las capas a dibujar, hacerlo dentro de una capa padre situada en el BODY de nuestro documento, con lo que lo conservaríamos tal cual. Para ello debemos utilizar una escritura diferente para cada navegador, pués los diferentes navegadores tratan las cpapas de una forma diferente, y lo primero que debemos hacer es averiguar qué navegador está usando nuestro visitante, lo que conseguimos mediante es script:
n4 = (document.layers)? true:false;
n6 = (document.getElementById) true:false;
ie = (document.all)? true:false
que lo que hace es comprobar si el navegador reconoce la existencia de layer, con lo que será entonces Nestcape 4x, si reconoce la propiedad getElementById, con lo que será Nestcape 6 o si reconoce la referencia document.all, que el único navegador que lo hace así es Internet Explorer. Con este código tenemos ya una variable dependiente del navegador, y refiriéndonos a ella podremos escribir código para todos los navegadores.
El siguiente paso será establecer en el BODY una capa para escribir en ella:
<div id="padre" style="position:absolute;top:100px;left:200px;width:300px;height:200px;
clip:rect(0,300,200,0);background-color:yellow;layer-background-color:yellow;"><div>
Vamos a esplicar un poco esto: en primer lugar destacar que la capa debe estar posicionada absolutamente, ya que si no es así no podemos escribir dentro de ella. Además, debemos clipear la capa, recortarla, ya que si no lo hacemos el navegador de Nestcape no respetará las dimensiones establecidas, adpatándolas al contenido de la capa. Por último, debemos usar background-color para I Explorer y layer-background-color para Nestcape, ya que ambos navegadores asignan color de fondo a una capa de forma diferente.
El siguiente paso será escribir ya el contenido de la variable grafico obtenida anteriormente dentro de la capa padre, y para ello hay que hacerlo de forma diferente para cada navegador.
Internet explorer y Nestcape 6 aceptan la propiedad innerHTML, que permite escribir directament en la capa padre, si bien la forma de referirse a esta es diferente en ambos navegadores. Por lo tanto debemos escribir para estos:
if (ie) document.all['padre'].innerHtml=grafico;
if(n6) document.getElementById['padre'].innerHTML= grafico;
pero Nestcape 4x no admite la propiedad innerHTML, por lo que para poder escribir dentro de una capa debemos usar el comando document.write de la siguiente forma:
if(n4) {
with (document.layers['padre'].document) {
open();
write(grafico);
close();
}
ya que al considerar este navegador cada capa como un documento individual, debemos primero abrirlo para su escritura, escribir en él y luego cerrarlo.
El código total de nuestra página será:
<html>
<head>
<script
language="JavaScript" type="text/javascript">
var X=new Array(2),Y=new
Array(2);
X[1]=200;X[2]=280;
Y[1]=150;Y[2]=50;
var a,b,p=150;
var
x1=new Array(p);
var y1=new Array(p);
function
linea(X1,Y1,X2,Y2)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[0]=X1;
y1[0]=Y1;
for
(i=1;i<p;i++)
{
x1[i]=x1[(i-1)]+((X2-X1)/p);
y1[i]=a*x1[i]+b;
}
var grafico='';
for
(i=0;i<p;i++)
{
grafico+='<div
style="position:absolute;top:'+y1[i]+'px;left:'+x1[i]+'px;">.</div>\n';
}
n4 = (document.layers)? true:false
n6 =
(document.getElementById)? true:false
ie = (document.all)?
true:false
if (ie)
document.all['padre'].innerHTML=grafico;
else if (n6)
document.getElementById['padre'].innerHTML= grafico;
else if(n4)
{
with (document.layers['padre'].document)
{
open();
write(grafico);
close();
}
}
}
</script>
</head>
<body
onload="linea(X[1],Y[1],X[2],Y[2])">
<div id="padre"
style="position:absolute;top:50px;
left:200px;width:400px;height:300px;clip:rect(0,400,300,0);background-color:yellow;layer-background-color:yellow;"><div>
</body>
</html>
El resultado de este código puedes verlo en esta ventana flotante.
 |
 |
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7