|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTMLWebScript - Textos
Texto coloreado I
por Luciano Moreno, del departamento de diseño web de BJS Software.
Vamos a ver en esta ocasión cómo podemos crear un texto dinámico, que va a ir cambiando el color de una de sus letras secuencialmente, con lo que obtendremos un bonito efecto deslizante para nuestras páginas web.
Como siempre que trabajamos con DHTML, el código necesario para los diferentes navegadores cambia, y debemos acceder a las capas mediante la sintaxis propia de cada uno de ellos.
El código necesario para la página es el siguiente:
<html>
<head>
<title>HTMLWeb - HTMLWebScript - texto_1</title>
<style type="text/css">
#contenedor{position:absolute;top:10px;left:250px;width:300px;height:20px;clip:rect(0,300,20,0);}
.texto{font-size:18px;font-family:Verdana,Helvetica;font-weight:bold;}
</style>
<script language="JavaScript">
/**
* definimos las variables globales necesarias
* var n >> marcapasos del bucle
* var contenido >> string que va a almacenar en cada momento la variante del mensaje a pintar en la capa
* var mensaje >> mensaje a mostrar en la capa
*/
var n=-1;
var contenido="";
var mensaje="BIENVENIDOS A HTMLWEB";
/**
* funcion principal
*/
function escribe()
{
/**
* para Internet
Explorer
*/
if(document.all)
{
/**
* si el marcapasos es menor que la longitud del mensaje >> continuamos el
bucle, aumentando 1 unidad
n
*
si el marcapasos iguala la longitud del mensaje >> lo
inicializamos
*/
if(n<mensaje.length)
n+=1;
else
n=-1;
/**
*
iniciamos el
bucle
*
asignamos a la letra de igual posicion que el marcapasos en la cadena del
mensaje el color
verde
* y
a las otras el color rojo, y almacenamos todo como un string en la variable
contenido
*/
for(m=0;m<=mensaje.length;m++)
{
if(m!=n)
{
contenido+=('<font color="#ff3300"
class="texto">'+mensaje.charAt(m)+'</font>');
}
else
{
contenido+=('<font color="#336600"
class="texto">'+mensaje.charAt(n)+'</font>');
}
}
/**
* una
vez creada la cadena completa de este ciclo del bucle, la escribimos en la capa,
usando la sintaxis
* propia
de I.
Explorer
*
luego inializamos de nuevo la variable contenido, para empezar desde cero el
siguiente
bucle
*/
document.all['contenedor'].innerHTML=contenido;
contenido="";
}
/**
* para Nestcape Navigator
4x
*/
else
if(document.layers)
{
if(n<=mensaje.length)
n+=1;
else
n=-1;
/**
* este
navegador no permite escribir directamente en una capa, pues considera cada capa
como
* un
documento propio. Hay que abrir el documento de la capa, escribir en el y
cerralo
luego
*/
document.layers['contenedor'].document.open();
for
(m=0;m<mensaje.length;m++)
{
if(m!=n)
{
document.layers['contenedor'].document.write('<font color="#ff3300"
class="texto">'+mensaje.charAt(m)+'</font>');
}
else
{
document.layers['contenedor'].document.write('<font color="#336600"
class="texto">'+mensaje.charAt(n)+'</font>');
}
}
document.layers['contenedor'].document.close();
}
/**
* para Nestcape Navigator
6x
* este si permite escribir
directamente en la capa, al igual que I.
Explorer.
* para acceder a la capa
usamos el objeto getElementById('nombre
capa')
*/
else
if(document.getElementById)
{
if(n<mensaje.length)
n+=1;
else
n=-1;
for(m=0;m<=mensaje.length;m++)
{
if(m!=n)
{
contenido+=('<font color="#ff3300"
class="texto">'+mensaje.charAt(m)+'</font>');
}
else
{
contenido+=('<font color="#336600"
class="texto">'+mensaje.charAt(n)+'</font>');
}
}
document.getElementById('contenedor').innerHTML=contenido;
contenido="";
}
/**
* llamamos de nuevo a la
funcion cada 300 milisegundos
*/
setTimeout("escribe()",300);
}
</script>
</head>
<body bgcolor="#ffff99"
onLoad="escribe()">
</body>
</html>
Consideraciones:
1) Aplicamos diferente sintaxis de código para cada navegador, ya que cada uno de ellos maneja las capas de forma diferente. Para más información, ver diferentes artículos de DHTML en este mismo portal.
2) setTimeout("funcion()", tiempo) es un método de JavaScript que llama a una función en un tiempo en milisegundos determinado.
3) En el caso de Nestcape 4x usamos los métodos open( ), write ( ) y close( ) para abrir la capa, escribir en ella y cerrarla en cada paso del bucle, ya que este navegador considera cada capa como un documento independiente. En el caso de Nestcape 6x e Internet Explorer, escribimos directamente en la capa mediante la propiedad innerHTML. Esta escribe código HTML en una capa. Para escribir texto sin marcas se puede usar la propiedad innerText.
Por lo demás creo que queda claro el código para aquellas personas con conocimientos suficientes de DHTML.
El resultado de este código podéis verlo pinchando aquí.
Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Textos