Questa sera ho avuto bisogno di uno script che mi aiutasse a ridimensionare dinamicamnte il testo contenuto in una pagina html, non volevo creare qualcosa di pesante e che rendesse la pagina troppo pesante, ma grazie ad AJAX ci sono riuscito. Vediamo ora come fare:
1. Creiamo uno script contenente le funzioni che agiscono sul DOM:
<script type="text/javascript">//<![CDATA[
//funzione che diminuisce la dimensione del testo
function piccolo(){
document.body.style.fontSize = "1em";
}
//funzione che riporta alle dimensione di default del testo
function normale (){
document.body.style.fontSize = "0.5em";
}
//funzione che ingrandisce la dimensione del testo
function grande(){
document.body.style.fontSize = "1.5em";
}//]]>
</script>
NOTA: Vi ricordo di settare la dimensione normale del testo uguale a quella che avete nel foglio di stile, i valori possono essere espressi in em, px, pt.
Fatto questo non vi resta che inserire nel body i link (vuoti) per poter chiamare le funzioni:
<a onclick="grande();" href="#" title="Ingrandisci il testo"> A+ </a>|
<a onclick=normale(); href="#" title="Testo normale"> A </a>|
<a onclick=piccolo(); href="#" title="Diminuisci il testo"> A- </a>
Questo é tutto, ora siete liberi di modificarlo come meglio credete magari inserendo delle immagini al posto del testo. Buon lavoro…







2 comments
Comments feed for this article
3 Marzo 2009 a 16:23
Daniele
Ciao,
ldevo dire che la guida è molto utile e funzionale, solo una piccola domanda, applicata come l’hai postata ridimensiona solamente i link ipertestuali, se io volessi ingrandire solo i paragrafi ?
Grazie.
20 Settembre 2009 a 17:16
giasone
Ciao Daniele, probabilmente avrai risolto ma per selezionare uno specifico div o elemento della pagina potresti usare un getelementbyid() per selezionare quello che ti serve.