Une boite au contenu aléatoire préchargé

Bonjour,

J'ai remarqué sur le site de libération quelquechose que j'aimerais beaucoup réutiliser mais je n'ai aucune idée de ou chercher pour réaliser cette chose.

Vous pourrez voir de quoi je parle sur cette page :
http://www.liberation.fr/culture/

Environ au milieu, il y a un cadre dans les tons marrons intitulé "Les +" avec deux onglets. Lorsque on clic un onglet ou un autre le contenu change sans pour autant recharger la page.

Je voudrais savoir comment faire si c'est bien à base de CSS. Et si ce n'est pas du CSS mais que quelqu'un à tout de même une idée, je suis preneur.

Merci de votre aide.

Bonjour,

Rapidement:

le principe est simple:
- les deux blocs sont présents dans la source HTML
- ils sont positionnés au même emplacement via CSS
- l'un des deux est en display:none par défaut.
- les onglets sont de simples appels de fonction javascript inversant les valeurs des display.

Il y a quelques avantages :
- le contenu complet est perceptible lorsque les feuilles de styles sont désactivées ou non supportées.
- une seule version du document est générée côté serveur
- il n'y a pas d'AJAX, donc pas de problème de contexte de navigation qui fait "plop" sans que ce soit perceptible, ni de robots d'indexation de moteurs de recherche qui ne savent pas trouver la moitié du contenu, etc.

Les limites sont évidentes, et en particulier:
- le display none par défaut du 2e bloc le rend inaccessible aux utilisateurs ayant activé CSS mais pas javascript
- le display none le rend également inaccessible à une partie des utilisateurs de lecteurs d'écran

Pour éviter ces défauts, les précautions à prendre sont notament :
- établir une structure cohérente avec la totalité du contenu (les deux onglets)
- bâtir là-dessus une belle mise en page avec les deux blocs visibles
- ajouter, une fois cette base établie, la surcouche javascript qui va passer par le DOM pour modifier les styles, créer l'effet d'onglets et générer les liens de ceux-ci. Bref, considérer résolument l'effet comme une option éventuelle du rendu, et non comme l'objectif unique.
- éviter le display:none pour les lecteurs d'écran, et passer plutôt par le masquage type méthode de Bowman (faire une recherche ici sur cette expression ou voir la FAQ)
- s'assurer que ce sera utilisable au clavier

<edit>Au cas où: la réponse est non, on ne peut pas le faire rien qu'en CSS et sans javascript </>
Modifié par Laurent Denis (30 Sep 2006 - 07:14)

Merci beaucoup de cette réponse étoffée.

Etant passablement débutant dans le domaine, connaitriez-vous une adresse avec un tutorel ?