Como podeis ver le he puesto a cada post la posibilidad de aumentar o disminuir la fuente actual del post. Esto la verdad es que es muy práctico para esas personas que tienen problemas para leer las letras pequeña.
Voy a intentar mostraros los pasos necesarios para comprender como funciona esto para que podais implementarlo donde querais.
¿Que necesitamos?
Para comenzar vamos declarar una serie de variables para controlar el tamaño que le vamos dando a las fuentes. Para ello declararemos 4 variables globales, que indicarán el tamaño máximo, mínimo, actual y default.
FUENTE_DEFAULT = 9;
FUENTE_ACTUAL = 9;
FUENTE_MASPEQUENA = 7;
FUENTE_MASGRANDE = 18;
Luego, deberemos tener un par de funciones javascript que realizan las funciones de aumento y disminucion.
La función de aumento del tamaño de las fuentes seria la siguiente:
function MasTxt(div) {
FUENTE_ACTUAL = FUENTE_ACTUAL+2;
if (FUENTE_ACTUAL > FUENTE_MASGRANDE) {
FUENTE_ACTUAL = FUENTE_MASGRANDE
}
var divID = document.getElementById(div);
divID.style.fontSize = FUENTE_ACTUAL+”pt”;
}
Donde el único parametro que recibe es el elemento que ha de tratar.
La función de disminución seria de esta forma.
function MenosTxt(div) {
FUENTE_ACTUAL = FUENTE_ACTUAL-2;
if (FUENTE_ACTUAL < FUENTE_MASPEQUENA) {
FUENTE_ACTUAL = FUENTE_MASPEQUENA
}
var divID = document.getElementById(div);
divID.style.fontSize = FUENTE_ACTUAL+”pt”;
}
Recibiendo el mismo elemento de donde modificaremos el tamaño de las fuentes.
Como usarlo
Por último, nos queda utilizarlo. Osea integrarlo en el código para verlo funcionando.
Unicamente bástaria con utilizar el evento onClick de cualquier objeto para realizar la llamada.
Por ejemplo:
<div id=”texto”>Estas fuentes cambiaran de tamaño</div>
<b onClick=”MasTxt(’texto’);”>+</b> | <b onClick=”MenosTxt(’texto’);”>-</b>
Ficheros
Bueno, no es muy complicado y espero que os sirva de algo.
9 comentarios, 1 referencias
+
#