Script para o usuário poder aumentar e diminuir a fonte do site
Já começo falando que a maneira correta de se falar é “aumentar e diminuir a letra” (dica do Hugo Dias) para não confundir o usuário; essa foi a conclusão de um debate que rolou na internet justamente sobre a nomenclatura desse script.
O script consiste em aumentar e diminuir o tamanho da letra do site sem que seja necessário atualizar a página. Dentro do código você também pode definir o tamanho mínimo e máximo da letra como também as possíveis variações de tamanho.
Um exemplo de um código parecido pode ser visto aqui, na parte de cima da página, embaixo do topo e ao lado das opções “cadastre-se” e “login”.
O código é bem simples e está todo comentado. Usei nomes de variáveis em português e tentei ser o mais óbvio possível, só tem html (xhtml na verdade) e javascript no código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra
// Para usar coloque o comando: "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar
var tagAlvo = new Array('p'); //pega todas as tags p//
// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' );
var tamanhoInicial = 2;
function mudaTamanho( idAlvo,acao ){
if (!document.getElementById) return
var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
tamanho += acao;
if ( tamanho < 0 ) tamanho = 0;
if ( tamanho > 6 ) tamanho = 6;
tamanhoInicial = tamanho;
if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
selecionados.style.fontSize = tamanhos[ tamanho ];
for ( i = 0; i < tagAlvo.length; i++ ){
tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
}
}
// Fim do código de Aumentar/ Diminuir a letra
</script>
</head>
<body>
<a class="menos" href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a class="mais" href="javascript:mudaTamanho('texto', 1);">Aumentar</a>
<div style="font-size: 11px;" id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur scelerisque purus ut pede. Ut pulvinar diam vitae tellus. Nunc ultricies. Nam rhoncus justo vel dui. Morbi suscipit enim. Praesent dui dui, tincidunt eget, feugiat vel, tincidunt vel, elit. Curabitur tempus consequat nunc. Aliquam erat volutpat. Vivamus a massa non libero posuere blandit. Nulla ut velit quis leo luctus tincidunt. Vestibulum eget leo in augue ornare fringilla. Suspendisse suscipit dui. </p>
<p>Nullam ultrices justo eget mi. Curabitur porta augue eget magna. Nam imperdiet, ipsum eu aliquet interdum, justo ipsum pulvinar quam, quis convallis mi sapien eu ante. Etiam ac sem. Ut bibendum. Nulla facilisi. Vestibulum odio. Sed accumsan. Donec a dui. Cras lorem augue, egestas vel, accumsan vel, elementum sit amet, nisl. Cras id dui. Sed nulla ipsum, pulvinar et, suscipit a, vehicula eu, arcu. Fusce auctor nibh eget risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vitae ante in odio dapibus lobortis. </p>
</div>
</body>
</html>
Qualquer dúvida é só postar que farei o possível para ajudá-lo.
Veja também estas dicas:
