He estado buscando y no he encontrado nada, me preguntaba si se podría poner algo como esto en mi web
Para que los usuarios puedan aumentar o disminurir el tamaño de la fuente .
He estado buscando y no he encontrado nada, me preguntaba si se podría poner algo como esto en mi web
Para que los usuarios puedan aumentar o disminurir el tamaño de la fuente .
/* Fuente grande */
.nivel3 {font-size: 18px;}
</style>
<script language="javascript">
function tamFuente (nivel, elem) {
var elemento = document.getElementById(elem)
elemento.className = "nivel"+nivel;
}
</script>
En rojo te marqué el tamaño al que se reducirá al presionar el botón de reducir fuente.
En verde te marqué lo que sería el tamaño normal del texto
En azul te marqué el tamaño al que aumentará al presionar el botón de aumentar fuente.
Edita esos valores como más te guste.
Luego vamos a "Controlar páginas" y en la página en la que deseas mostrar las opciones de Aumentar y Achicar fuente pegarás este code habiendo presionado previamente el botón "Fuente HTML":
Cita:
<ul>
<li class="nivel1">
<a href="javascript:tamFuente(1,'contenido');">a-</a>
</li>
<li class="nivel2">
<a href="javascript:tamFuente(2,'contenido');">a</a>
</li>
<li class="nivel3">
<a href="javascript:tamFuente(3,'contenido');">a+</a>
</li>
</ul>
</ul>
<div id="contenido" class="nivel1">
Esta es una frase de ejemplo.
</div>
En donde está lo marcado en rojo debe estar el texto que se modificará de tamaño al presionar los links A-, A o A+
<ul>
<li class="nivel1">
<a href="javascript:tamFuente(1,'contenido');">a-</a>
</li>
<li class="nivel2">
<a href="javascript:tamFuente(2,'contenido');">a</a>
</li>
<li class="nivel3">
<a href="javascript:tamFuente(3,'contenido');">a+</a>
</li>
</ul>
</ul>
<div id="contenido" class="nivel1">
Esta es una frase de ejemplo.
</div>
Usas este:
Cita:
<ul>
<li class="nivel1">
<a href="javascript:tamFuente(1,'contenido');"><img border="0" src="URL DE LA IMAGEN A-"></a>
</li>
<li class="nivel2">
<a href="javascript:tamFuente(2,'contenido');"><img border="0" src="URL DE LA IMAGEN A"></a>
</li>
<li class="nivel3">
<a href="javascript:tamFuente(3,'contenido');"><img border="0" src="URL DE LA IMAGEN A+"></a>
</li>
</ul>
</ul>
<div id="contenido" class="nivel1">
Esta es una frase de ejemplo.
</div>
Hola!, Gracias por el código, pero me he fijado que hay webs en las que al darle a "aumentar" o "disminuir" aumentan y disminuyen el tamaño de fuente un par de veces, osea que puedes apretar 3 veces(o más) el "Aumentar" y cada vez que presiones la letra se hace mayor, no se si me explico.
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.