Modificare la dimensione dei caratteri al volo

Modificare la dimensione dei caratteri di un testo èuna utility interessante per gli utenti con difficoltàvisive: lo scopo, quindi, è quello di consentire allettore di ingrandire o rimpicciolire con un semplice click icaratteri del nostro sito, aumentandone usabilità edaccessibilità.

Utilizzeremo una semplice funzione Javascript per crearequesto semplice ed utile effetto Dhtml, ma iniziamo dalfoglio di stile. E' importante stabilire che perl'esempio utilizzeremo del testo di prova contenuto inuna coppia di Tag <p> e </p> a cuiassegneremo un ID per identificare quale livello deveessere preso in considerazione per la modifica del font-size.

Di seguito il Css:

<style type="text/css">    p { font-family: Verdana; font-size: 10px; }</style>

Lo scopo è semplicemente quello di definire, perchiarezza, un punto di partenza su cui basare il resto delloscript.
Di seguito riporto il codice Html per la scelta delfont-size desiderato (espresso in pixel) con riferimento allafunzione ImpostaFontSize() che analizzeremo inseguito:

 

<p align="center">    <a href="javascript:ImpostaFontSize(10)">10 pixel</a> ::    <a href="javascript:ImpostaFontSize(12)">12 pixel</a> ::    <a href="javascript:ImpostaFontSize(15)">15 pixel</a> ::    <a href="javascript:ImpostaFontSize(20)">20 pixel</a></p><p align="center" id="LivelloModificabile">    Inserire qui il testo che può cambiare di dimensione...</p>

 

Analizziamo brevemente i due passi evidenziati in rosso; lafunzione riporta tra parentesi un parametro che identifica ilnumero in pixel che deve essere assegnato al testo;LivelloModificabile è l'ID del testo a cuifarà riferimento la funzione di modifica delledimensioni del carattere.

Di seguito la funzione Javascript:

<script language="javascript"> <!--    function ImpostaFontSize(dimensione)    {  LivelloModificabile.style.fontSize = dimensione;    } //--></script>

La varabile parametrica dimensione serve astandardizzare la funzione in base al font-size impostato almomento del click sulle opzioni scelte.

Per problemi nell'utilizzo dello script, poteteconsultare il nostro forum didiscussione.

 



Ti potrebbe interessare anche

commenta la notizia