Modificando los Textos

   Ya sabemos que con JavaScript podemos hacer las mil y una cosas, hoy voy a explicarles algo sobre los textos, como cambiar el color, tamaño, tipo de letra y todo eso, porque en JavaScript y no HTML, pues, porque de eso se trata el blog, de Java.

   Esto consta de dos partes, la primera que es la clase principal (función) y la segunda que es la que muestra el texto, vamos con la primera:

<script language="javascript" type="text/javascript">
function ColoreaTexto(texto) {
indexCar = 0
indexColor = 0
indexTipo = 0
indexTalla = 0
codigoTexto = ""
do {
caracter = texto.charAt( indexCar )
if (caracter == " ") {
indexCar++
codigoTexto += ' '
continue
}
color = colores[ indexColor ]
tipografia = tipografias[ indexTipo ]
talla = tallas[ indexTalla ]
codigoTexto += '<font color="' + color + '" face="' + 
tipografia + '" size="' + talla + '">' + caracter + '</font>'

indexColor++
if ( indexColor == colores.length ) indexColor = 0

indexTipo++
if ( indexTipo == tipografias.length ) indexTipo = 0

indexTalla++
if ( indexTalla == tallas.length ) indexTalla = 0

indexCar++
} while ( indexCar < texto.length )
document.write( codigoTexto )
}
</script>

   Y lo que debemos colocar para mostrar el texto es lo siguiente:

<script language="javascript">
colores = new Array("red", "magenta", "violet",
"pink", "violet", "magenta"); 
tipografias = new Array("arial", "courier"); 
tallas = new Array("4"); 
ColoreaTexto("ESTA ES LA COMBINACION DE COLORES");
</script>

   Los arreglos de colores podemos cambiarlo por los que queramos, al igual que el tamaño de las letras y el tipo, el resultado seria el siguiente


   Cambiando los valores del tamaño, tipo de letra y colores, podemos obtener un sin fin de combinaciones, solo es cuestion de ir probando las combinaciones que mas nos parescan e implementarlas en nuestras web's

2 Comentarios

Escribir Comentario
Roni
AUTOR
2 de marzo de 2012, 2:42 delete

Hola, el blog es muy bueno y de mucha ayuda, solo tengo una consulta; como puedo cambiar de color a una o unas palabras especificas cuando las escribo... Por ejemplo si escribiera perro que instantáneamente le cambie el color por decir a color verde.

Gracias Por Tu Ayuda,

Responder
avatar
2 de marzo de 2012, 8:36 delete

Hola, si nos basamos en el ejemplo entonces tendrías que colocar una condición, algo como esto:

if (texto.toLowerCase() == "perro") { codigoTexto = '<font color=green'; }

Con esto le dices que si el texto ingresado es perro, lo pinte de verde sin importar las mayúsculas o minúsculas, por ejemplo.

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon