Menu Agrandir / Réduire textes et images

Bonjour à tous,

Je suis en train de reproduire un site avec une manière d'agrandir qui est extra.
Site en question: http://medienfreunde.com/
Il est possible d'agrandir le texte et également les images.

Pour le moment, je suis en phase test et je n'arrive même pas à faire fonctionner le menu d'agrandissement. Pourtant j'ai repris le styleswitcher.js et j'ai adapté la taille du contenu en .em (qui était en pixels auparavant). J'ai également reproduit les 3 css - 1 pour chaque taille.

Est-ce que quelqu'un peut me donner un début de piste.
Mon site se trouve sur : www.rsfinance.ch/test/qui_sommes_nous/portrait.php

Merci de vos remarques précises.

Salut!

Est ce que tu peux nous dire ce qui ne marche pas, et surtout, comment tu voudrais que çà marche?

Éventuellement, peut être peux tu nous mettre au moins des extraits des tes css / html ?


Tiens nous au courant

valign a écrit :
une manière d'agrandir qui est extra (...) http://medienfreunde.com/

Quel intérêt alors que les navigateurs le font déjà?

Pour l'autre jojo:

Ce que je souhaite c'est arriver au même résultat, avoir 3 boutons qui permettent d'agrandir et réduire la taille du texte et de l'image.

Pour Florent:

L'intérêt c'est bêtement de pouvoir agrandir le site avec des boutons auxquels tout un chacun peut accéder.

_____________________________

En attendant, j'ai trouvé comment faire pour agrandir le texte avec quelques lignes de php.
Je fais mes premiers pas avec l'unité em, après avoir lu votre article sur la typographie web: gérer la taille du texte avec les "em" http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html, j'ai compris que cela peut être fort utile.

Voici le résultat de mon site actuel.

www.rsfinance.ch/test/qui_sommes_nous/portrait.php

Je cherche maintenant la manière la plus simple d'adapter les images qui vont avec. Peut-être en utilisant l'unité em. Si vous avez des idées, elles sont les bienvenues.

valign a écrit :

Pour Florent:

L'intérêt c'est bêtement de pouvoir agrandir le site avec des boutons auxquels tout un chacun peut accéder.

Dans ce cas, pourquoi ne pas réimplémenter également les boutons précédant/suivant? L'impression de la page? L'ajout aux bookmarks? Une recherche sur Google?

J'suis pas sûr d'avoir tout compris, cependant les trois petit moyen et grand A disponible en haut à droite de ce site serve à quoi ?

wildben a écrit :
J'suis pas sûr d'avoir tout compris, cependant les trois petit moyen et grand A disponible en haut à droite de ce site serve à quoi ?

À faire ce que cherche à faire valign...

+1 Florent et Benjamin.

Pour Benjamin:

L'idée c'est simplement de donner accès à la fonction agrandir / réduire. Pour nous qui avons l'habitude d'utiliser les navigateurs, nous savons que cette fonction existe.

Ce n'est pas le cas de tout le monde.

______________________________

Existe-il une solution qui permet de rappeler la fonction zoom et que cela fonctionne avec tous les navigateurs ?

Ex. www.credit-suisse.com

valign a écrit :
Existe-il une solution qui permet de rappeler la fonction zoom et que cela fonctionne avec tous les navigateurs ?

En bidouillant pas mal, oui. Cela demandera d'utiliser JavaScript.

Tu peux définir un ensemble de tailles. Puis, au clic sur l'une des tailles, il te faut adapter:

1. Toutes les tailles de texte (relativement facile si tout est en relatif et que tu n'as qu'à augmenter le font-size de l'élément body), ou celles de certains textes uniquement (plus fastidieux).
2. Les dimensions des images insérées dans la page HTML, soit en les changeant en CSS (auquel cas tu as un ré-échantillonnage à la volée par le navigateur, avec des résultats pas terribles en général), soit en chargeant des images différentes (induis un temps de chargement).
3. Les images de fond en CSS. Il faudra remplacer celles existantes par d'autres.
4. Les animations Flash devront être redimensionnées (modification des attributs DOM).

Les points 1 et 3 peuvent se gérer relativement facilement dans la feuille de styles. Côté JS, tu te contente d'ajouter une classe à l'élément body, et tu utilise cette classe dans ta feuille de styles pour prévoir tes variations de styles.
Les points 2 et 4 demandent des manipulations du DOM. Elles peuvent éventuellement être plus ou moins automatisées, sinon il faudra prévoir élément par élément...

À faire pour chaque taille proposée.

Pour l'exemple du Crédit Suisse, ils ont retenu une solution plus approximative qui consiste à donner des dimensions en EM à tous les éléments, avec parfois des valeurs cocasses: 6.6667em, 34.1667em. Du genre ingérable en maintenance.
Du coup ils se contentent de modifier le font-size de body, et le reste suit.

Sinon, tu considères que les navigateurs font ça bien mieux que toi, et c'est réglé. Et aussi: la solution qui te semble attirante n'aurait aucun intérêt dans un contexte où on zoome plus volontiers: les terminaux mobiles.
Autre considération: des lettres de tailles différentes, c'est le mauvais symbole pour un zoom homothétique de toute la page.