El DOM (Modelo del los Objetos del Documento) de Internet Explorer te permite leer y escribir (cambiar) casi todos los estilos (Styles) de los elementos de tu documento. Esto hace que el sistema de D-HTML de IE 4.0 sea superior. Es probable que en las versiones "5" de los browsers los sistemas serán más parejos. Mientras tanto es posible de simular este aspecto de IE 4.0 en Netscape 4.0 utilizando unos trucos como document.write-ando nuevas capas con estilos diferentes. De esto se trata esta lección.
Para cambiar el color de fondo de una capa en Netscape tienes que fijar la propiedad de bgColor de su objeto de documento:
document.layer["layerName"].document.bgColor = "red"
En IE, fijas la propiedad backgroundColor de la capa:
document.all["layerName"].style.backgroundColor = "red"
Entonces una función doble browser se verá así:
function setBGColor(id,nestref,color) {
if (ns4) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id):document.layers[id]
lyr.document.bgColor = color
}
else if (ie4) {
document.all[id].style.backgroundColor = color
}
}
Ver bgcolor1.html para un ejemplo de color de fondo cambiante.
Tienes la opción de utilizar lo siguiente, un agregado a el DynLayer para lograr la misma meta:
function DynLayerSetBGColor(color) {
if (ns4) this.doc.bgColor = color
else if (ie4) this.css.backgroundColor = color
}
Cambiar el color del texto en IE es muy fácil. Como antes, simplemente cambias el color en el Style del elemento:
document.all[id].style.color = "#FF0000"
Pero para hacer lo mismo en Netscape requiere un document.write() para re-escribir la capa con un Style diferente. Una manera que funciona bien es utilizando el tag FONT:
<DIV ID="mytext"><FONT COLOR="#FF8000">My Text</FONT></DIV>
Y después usando el función layerWrite() escribimos la capa de nuevo pero con un nuevo color:
layerWrite('mytext',null,'<FONT COLOR="#008000">My Text</FONT>')
Sin embargo, evitaré del todo usar el tag FONT. Usare otra manera para lograr ese objetivo que es definir los estilos que vamos a usar desde el principio.
<STYLE TYPE="text/css">
<!--
.orange {color:#FF8000;}
.green {color:#008000;}
#mytext {position:absolute; left:50; top:100;}
-->
</STYLE>
Además, en ves de usar el tag FONT, voy a utilizar el tag SPAN
<DIV ID="mytext"><SPAN CLASS="orange">My Text</SPAN></DIV>
Así mi función JavaScript escribe de nuevo la capa y tiene el CSS CLASS como un argumento:
function mytextColor(color) {
layerWrite('mytext',null,'<SPAN CLASS="'+color+'">Mi Texto Nuevo</SPAN>')
}
En mi caso puedo disparar la función con cualquiera de los siguientes comandos:
mytextColor('orange')
mytextColor('green')
Vea fontcolor1.html para un ejemplo.
La razón principal de cambiar los colores de texto es de crear sobrepasadas de texto y así evitar usar imágenes. He creado un sistema de hacer esto, pero no es un sistema perfecto, es tedioso y poco bonito. Te enseñaré la manera que intenté de hacerlo al principio, sin embargo, reconozco que no trabaja muy bien. De todos modos creo que es importante de enseñar el proceso de pensamiento al buscar soluciones por estos problemas.
Como el ejemplo del color de texto, yo justamente he codificado manualmente a cada uno de los styles que deseo utilizar. En mi caso tengo en cada uno cuatro capas conteniendo el enlace que deberá cambiar de color cuando traspasas encima y te quitas de ellos:
<STYLE TYPE="text/css">
<!--
A.red {color:red;}
A.blue {color:blue;}
#link0Div {position:absolute; left:50; top:50;}
#link1Div {position:absolute; left:50; top:70;}
#link2Div {position:absolute; left:50; top:90;}
#link3Div {position:absolute; left:50; top:110;}
-->
</STYLE>
Desde que esto es solamente una demostración, he utilizado enlaces genéricos para las capas:
<DIV ID="link0Div"><A CLASS="blue" HREF="page1.html" onMouseOver="linkOn('link0Div','page1.html','Link 1')">Link 1</A></DIV>
<DIV ID="link1Div"><A CLASS="blue" HREF="page2.html" onMouseOver="linkOn('link1Div','page2.html','Link 2')">Link 2</A></DIV>
<DIV ID="link2Div"><A CLASS="blue" HREF="page3.html" onMouseOver="linkOn('link2Div','page3.html','Link 3')">Link 3</A></DIV>
<DIV ID="link3Div"><A CLASS="blue" HREF="page4.html" onMouseOver="linkOn('link3Div','page4.html','Link 4')">Link 4</A></DIV>
Note que en los enlaces he establecido solamente eventos onMouseOver. Este un pequeño truco que encontré. Primero enseña el onMouseOver, y cuando el enlace cambia de color, he re-escrito el contenido de la capa y he reemplazado onMouseOver con onMouseOut. De esta forma no habrá ninguna interrupción en la secuencia de traspasar (rollover).
Tengo una función separada de JavaScript para cada estado del enlace:
function linkOver(id,link,text) {
layerWrite(id,null,'<A CLASS="red" HREF="'+link+'" onMouseOut="linkOut(\''+id+'\',\''+link+'\',\''+text+'\')">'+text+'</A>')
}
function linkOut(id,link,text) {
layerWrite(id,null,'<A CLASS="blue" HREF="'+link+'" onMouseOver="linkOver(\''+id+'\',\''+link+'\',\''+text+'\')">'+text+'</A>')
}
El formato de cada una de mis enlaces son los mismos, entonces lo único que necesité fue de hacer variables de layerName (id), hyperlink location (link) y mostrar el texto (text).
Ver textrollover1.html para un ejemplo rollover texto
Como sea el caso, en Netscape ese ejemplo parece que no trabaja apropiadamente. Los onMouseOut´s no se activan si sobrepasas entre los enlaces muy ligero. Necesitas una manera de revisar bien para poder ver si algunos de los enlaces continúan estando abiertos. Bueno lo que he decidido es de cambiar la forma de selección. He construido un array de dos dimensiones para tomar lista de los nombres de los capas, enlaces y una banderita de (verdadero/falso) para indicar que enlaces están o no están respectivamente relucientes.
link = new Array()
link[0] = new Array('link0Div','link1.html','Link 1',false)
link[1] = new Array('link1Div','link2.html','Link 2',false)
link[2] = new Array('link2Div','link3.html','Link 3',false)
link[3] = new Array('link3Div','link4.html','Link 4',false)
Ahora tenemos una manera de como accesar cualquiera de los layer/links con números (0,1,2,3,). Para accesar cuales son los valores del enlace solamente he escrito enlace (link) [x] [0] para el nombre de la capa, link [x][1] para el hyperlink etc. Donde esta x es el número del enlace (link).
Las funciones linkOver() y linkOut() tienen que ser puestas al día para explicar todos estos cambios. En esas funciones he agrgado una línea para seleccionar una banderita con el valor del enlace "link" (el link [x][3]) -verdadero (true) queriendo decir encendido "on" y falso (false) queriendo decir apagado "off". Cuando esto sucedió el onMouseOut, fue cuando Netscape tuvo sus problemas. Entonces para corregirlo, aquí hago un pequeño chequeo para que la próxima vez que hagas un onMouseOver (y de aquí llamar el linkOn() function) pasará por un loop para chequear el valor de la banderita de cada enlace y si es verdadero (true) automáticamente llama el linkOut() function para forzar el linkOff.
function linkOver(num) {
if (ns4) {
for (var i=0;i<link.length;i++) {
if (link[i][3]==true) linkOut(i)
}
}
link[num][3] = true
layerWrite(link[num][0],null,'<A CLASS="red" HREF="'+link[num][1]+'" onMouseOut="linkOut('+num+')">'+link[num][2]+'</A>')
}
function linkOut(num) {
link[num][3] = true
layerWrite(link[num][0],null,'<A CLASS="blue" HREF="'+link[num][1]+'" onMouseOver="linkOver('+num+')">'+link[num][2]+'</A>')
}
El HTML para los enlaces (links) también debe de ser puesta al día, las funciones linkOver() y linkOut() solamente necesitan pasar ahora el índice del link.
<DIV ID="link0Div"><A CLASS="blue" HREF="page1.html" onMouseOver="linkOver(0)">Link 1</A></DIV> <DIV ID="link1Div"><A CLASS="blue" HREF="page2.html" onMouseOver="linkOver(1)">Link 2</A></DIV> <DIV ID="link2Div"><A CLASS="blue" HREF="page3.html" onMouseOver="linkOver(2)">Link 3</A></DIV> <DIV ID="link3Div"><A CLASS="blue" HREF="page4.html" onMouseOver="linkOver(3)">Link 4</A></DIV>
Y aquí lo tenemos funcionando, el rollover texto.
Ver textrollover2.html para un ejemplo rollover.
Por cierto, esta técnica puede ser utilizada para no solamente cambiar el color, puedes cambiar otras propiedades del texto con solo definir los valores de tus CSS distintamente. Lo siguiente hace que el subrayado desaparezca y cuando el enlace (link) esta encendido produce en texto en letras Itálicas:
A.blue {color:blue; text-decoration:none;}
A.red {color:red; text-decoration:none; font-style:italic;}
Ver textrollover3.html para un texto rollover con letras itálicas.
Tamaños de texto (haciendo el texto grande o pequeño) es técnicamente posible con Dynamic HTML, sin embargo la verdad es que esta no es la mejor tecnología para llevarlo a cabo. Algo como Flash es mejor y ligero, y con el por venir Flash 3.0 vector formato de gráficas/animación parece que definitivamente este va a ser el escogido por los desarolladores de la próxima versión de browsers. Pero hasta ese momento, ciertamente puedes jugar con lo que hay y llevar a cabo algo similar como solo JavaScript y CSS.
El concepto de gradación de texto es exactamente la misma técnica para cambiar colores. Lo primero que tienes que hacer es pre-define los CSS styles que vas a utilizar:
.s10 {font-size:10pt;}
.s15 {font-size:15pt;}
.s20 {font-size:20pt;}
.s26 {font-size:26pt;}
Y tener una capa que demuestra primero uno de ellos:
<DIV ID="welcomeDiv"><SPAN CLASS="s10">Welcome</SPAN></DIV>
Entonces el asunto es solamente escribir una función que re-escribe la capa apuntando hacia a un style diferente:
function fontScale(size) {
layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+size+'">Welcome</SPAN>')
}
Para el ejemplo siguiente he puesto solo enlaces simples que hacen el texto grande o pequeño:
<A HREF="javascript:fontScale(10)">10 pt</A> <BR><A HREF="javascript:fontScale(15)">15 pt</A> <BR><A HREF="javascript:fontScale(20)">20 pt</A> <BR><A HREF="javascript:fontScale(26)">26 pt</A>
Ver fontscaling1.html para este ejemplo de gradación.
Como sea eso no es de mucha diversión. Podemos animar la gradación de nuestras letras para que el texto aparezca que esta engrandeciendo o disminuyendo si eso es lo que deseamos. Para hacer eso necesitaremos bastantes estilos definidos - uno para cada paso en la secuencia. Es fácil hacer eso en un loop de escribir cada style. He decidido de tener una gradación de letras la cual va de 10 a 50 puntos:
var sizestr = '<STYLE TYPE=
"text/css">\n'for(vari=10;i<=50;i++) sizestr += '.s'+i+' {font-size:'+i+'pt;}\n'
sizestr += '</STYLE>'
document.writeln(sizestr)
He retenido la función moverse a través de los styles muy simple. He puesto solamente el variable size variable el cual retiene la información de cual style esta en ese momento mostrándose y incrementa eso por cada repetición. El if (if(size<50)) informe es el que determina cuando terminar el loop.
var size =
10 function scaleWelcome()
{ if(size<50) {
size++
layerWrite('welcomeDiv',null,'Welcome')
setTimeout('scaleWelcome()',30)
}
}
Ahora solamente active la función y esta hará que el texto aumente de tamaño.
Ver fontscaling2.html para una animación de letras.
Ese ejemplo tiene el texto pegado a la izquierda - cuando el texto aumenta no se reajusta a la nueva talla y termina viéndose un poco incómodo. Para resolver este problema puedes centrar el texto con solo usar <DIV ALIGN= "CENTER"> o el viejo tag <CENTER>. Sin embargo cuando haces esto es probablemente mejor de tener una capa contenedora con el cual controlas la posición, entonces tu capa de texto se queda dentro de esta y centrada. En el ejemplo siguiente voy enseñar de como fijar esta.
Ver fontscaling3.html para un gradación centrado de letras
| Casa | Próxima Lección: Fuente Externa de Ficheros |