Botón para cambiar el tamaño del texto instantáneamente

Muchos periódicos digitales nos ofrecen la posibilidad de ampliar y disminuir el tamaño del texto a nuestro gusto. En este artículo, extraído de Xyberneticos, se muestra como conseguir dicho efecto y, de esta manera, ofrecer a nuestros lectores una ventaja más.

Si deseamos facilitar la lectura de cada uno de nuestros usuarios, no sería mala idea comenzar a implementar este tipo de opciones en nuestros blogs o web empresariales.

Podéis ver la demostración del script, descargarlo o seguir leyendo el artículo para conocerlo un poco más a fondo.

DemostraciónArchivo HTML

DescargaArchivo HTML

¿Cómo funciona?

Lo primero que haremos será incluir las librerías del script entre las etiquetas head de nuestro sitio, de la siguiente manera:

<script language="javascript" src="js/dw_cookies.js" type="text/javascript"></script>
<script language="javascript" src="js/dw_sizerdx.js" type="text/javascript"></script>

Después seleccionaremos que partes, div, son las que queremos que modifique el tamaño del texto:

<script type="text/javascript">
      dw_fontSizerDX.setDefaults( "px", 11, 11, 14, ['div.post p' , 'blockquote'] );
      dw_fontSizerDX.set(10, 10, 10, ['div#fontSize'] );
      dw_fontSizerDX.init();
      </script>

Por último agregamos los botones dónde queramos, siempre entre las etiquetas body de nuestro sitio.

<div id="fontSize">
        <ul>
          <li id="more"><a href="#" onClick="dw_fontSizerDX.adjust(1); return false" title="Aumenta el tamaño de texto"> Aumentar tamaño </a></li>
          <li id="less"><a href="#" onClick="dw_fontSizerDX.adjust(-1); return false" title="Disminuye el tamaño de texto">Disminuir tamaño</a></li>
        </ul>
      </div>

Visto: Botón ampliar tamaño de texto en nuestros artículos
Enlace: Free High Resolution Grunge Rustic Textures