Facbook viewat  Flickr
Accueil du site > Tutoriels > Augmenter / diminuer la taille de la police d’un site web

Javascript / CSS

Augmenter / diminuer la taille de la police d’un site web

Accessibilité

5 votes

Publié le vendredi 29 octobre 2010

Le but de ce tutoriel CSS   / JavaScript est de proposer une fonction d’augmentation et de diminution de la taille des polices des éléments de son site internet. Ce tutoriel a pour but de favoriser la mise en place de fonctions d’accessibilité simples pour faciliter l’accès à l’information pour tous les publics.

  • Définition du style CSS   du calque (
    ) sur lequel la fonction agira :
#accessible
{
position:relative;
float:left;
font-size:80%;// taille de la police en pourcentage
margin:0;
padding:0;
}
  • Insertion de la fonction JavaScript qui va agir sur la taille des textes contenus dans le calque ci-dessus :
<script language="JavaScript" type="text/javascript">                       
var taille;                       
taille = 1;
function ModifTaille(valeur)
{
        taille = taille + valeur;
        document.getElementById("accessible").style.fontSize = taille + "em";
// on récupère la valeur courante de la taille du texte et en la modifie en changeant les propriétés du DOM dynamiquement               
}        

</script>
  • Il ne manque plus qu’a créer les deux boutons qui vont agir sur la taille du texte contenu dans le claque :
<a href="#" title="Aggrandir la taille du texte">onClick="changerTaille(0.1); return false;" alt="Aggrandir la taille du texte" /></a> |
<a href="#" title="Réduire la taille du texte"> onClick="changerTaille(-0.1); return false;" alt="Réduire la taille du texte" /></a>

Ici on s’est servit de document.getElementById afin d’agir sur le calque ayant pour ID (accessibilite) mais on aurait pu agir sur une classe ou sur le body tout en entier avec l’attribut : document.getElementsByTagName("body")

Répondre à cet article

Plan du site | Contact | Suivre la vie du site RSS 2.0