Boutons Augmenter/Diminuer la Taille du Texte ?

Bonsoir,
J'aimerai savoir comment faire pour intégrer dans la page HTML 2 boutons pour augmenter et diminuer la taille des textes.
De préférence sans recharger complètement la page...

Merci !
Fu'

La solution est simple, il suffit d'avoir deux feuilles de styles, un petit script javascript, et trois ligne de code en html.

Le script javascript :

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (navigator.appName == "Microsoft Internet Explorer") {
window.resizeBy(0,-10);
window.resizeBy(0,+10);
}
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Ce script tu l'enregistre dans un fichier que tu nomme changement_css.js

Le script étant fait, il te faut ton fichier css, et le deuxieme fichier css avec une taille de texte different.

Il faut maintenant les integrer dans tes pages html.

<!--La feuille utilisé par défaut-->

<link rel="stylesheet" type="text/css" href="normal.css" title="normal">

<!--Une feuille alternative-->

<link rel="alternate stylesheet" type="text/css" href="grand.css" title="grand">

Ce code, tu le place à la place de ta ligne qui appelle ta css normale.

Puis apres tu rajoute le lien qui appelle le script Javascript :

<script language="JavaScript" src="changement_css.js" type="text/javascript"></script>

Tu le places juste apres tes liens de css.

Il manque plus qu'a créer les bouton qui te permettrons d'effectuer le changment de taille de police.

<ul>

<li><a href="#" onclick="setActiveStyleSheet('normal'); return false;">Normal</a></li>

<li><a href="#" onclick="setActiveStyleSheet('grand'); return false;">Grand</a></li>

</ul>

Voila, tu sais tout, bonne chance [/i][/i][/i][/i]
Modifié par Super_baloo8 (16 Feb 2006 - 23:44)

Je suis septique à l'utilité de se bouton. Comment une personne qui ne voit pas ou moyennement bien pourra localiser se bouton ? Je suggère simplement l'utilisation de police relative. Ce genre de bouton ne fait pas automatiquement augmenter l'accessibilité du site.

Cela permet quand même à IE de pouvoir disposer de taux d'agrandissement supérieur à ceux par défaut.

Après l'application de la taille de la police par l'intermédiaire du switcher 2 agrandissement sont encore possible puisque la taille de base à été augmentée.

A propos d'agrandissement progressif, c'est prévu sous opera et on peut l'obtenir avec Firefox en utilisant Ctrl + molette de la souris (cran par cran).

C'était à titre informatif.

Salut Clb

Ouai je parlais avec la solution qu'a abordé Fugita.

J'ai testé sa methode elle est pas trop mal... et je suis comme toi a par en rajoutant un cookie je vois pas comment sans rafraichir la page on peut garder les paramettre avec cette astuce.

Par contre si en plus d'un probleme de JS pas forcément activé/supporté sur la machine distante on rajoute un probleme de gestion de cookie pas forcément activé (je connais perso bcp de personne qui surf avec 0 cookie) sur la machine distante ... j'ai comme l'impression qu'à l'arrivé en voulant gagner en accessibilité on fini par en perdre

Donc pour moi la solution utliser 2 voir 3, 4, 5 ou + CSS est la meilleur. Un par configuration possible quoi

Edit : puisqu'en changeant de CSS (et donc rafraichir la page) rien ne t'empeche d'enregistrer ca dans une session PHP supporté par 100% des config
Modifié par haugure (17 Jan 2007 - 13:16)

oups double poste
Modifié par haugure (17 Jan 2007 - 13:15)

merci pour votre réponse ! (je suis polie )

Oui il me semble que cest bien là aussi mais lorsque je mets en % ca ne marche pas à cause de mon font-size je pense car moi je le met en "x-smal"...
Modifié par Sonia10 (12 Feb 2007 - 16:02)

Bonsoir,
Je suis nouveau et j'essai vos tutos, votre forum, le livre de microapp "css le guide complet" et j'y arrive petit à petit.
Seulement voilà, cette histoire d'images qui une fois cliquée permettrait d'obtenir un police plus grande (et vice et versa) me plait.
Le problème c'est que je n'y arrive pas .

Connaîtriez-vous un "pas à pas" pour "pas doués" ?? Mais vraiment un "pas à pas" ?