Franc83

Tableau à onglet multiples

25-09-2008

Tableau à onglets diaporama commenté

Un tableau très pratique pour commenter des images.

Les fichiers dont vous aurez besoin :

Le fichier CSS :

Le fichier js :

Un fichier image onglet:

L'autre fichier image onglet :

L'exemple en image :

Les rois du Trial sont capables des équilibres les plus inattendus et les plus improbales, et sont de plus, des forces de concentration et de patience.
Un entrainement physique et psychologique sont nécessaire à leur préparation pour la compétition.

Ciquez ici pour aller au tab quatre

Ils semblent défier les lois de la gravitation énoncées par Newton, et ce, grâce à leur sens de l'équibibre et la puissance de leurs machine, qui se comportent comme de véritables "tracteurs".
Ils sont capables de bonds prodigieux à des hauteurs qui défient la raison, mais ne croyez pas à de la folie, ils subissent un entraînement intensif, dans des zones à difficulté variables, jusqu'au jour où ils sont à même de commettre les pires défis. Courage et concentration, et un poil de folie...

Sur piste, les lois de l'équilibre sont aussi mises à rude épreuve, mais ici, joue en priorité la puissance de la machine et la dextérité, voire l'intrépidité du pilote.
Celui ci doit en effet utiliser l'effet "trépied" avec le genou posé au sol, pour maintenir sa moto sur sa trajectoire, et ne pas la coucher.

Imaginez maintenant ces mêmes pilotes dans une position instable, sur l'angle, en piste uniquement grâce à la force centrifuge et à la puissance de leur engin.
Ils roulent à près de 200km/h, et se situent à queques centimètres les uns des autres. La moindre erreur de trajectoire, de guidonnage, enverra tout le groupe par terre...dans les rails, ou dans le bac à sable.

Voici donc un outil bien pratique pour présenter une série d'images détaillées par un petit pragraphe explicatif.
Pour réaliser ce tableau à onglet, il vous suffit d'appeler dans le header un fichier feuille de style" tabcontent.css", un fichier javascript "tabcontent.js", puis de recopier le code plus bas pour l'introduire dans le html, entre les balises <body> et </body>. Il vous faudra aussi lancer les routines javascripts avec :

Le code html pour créer le tableau :

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="#" rel="tcontent5">Tab 5</a></li>
<li><a href="http://franc83.free.fr">Aide Astuce Weblog</a></li>
</ul>

<div id="tcontent1" class="tabcontent">
<img src="image1.jpg" style="float: left; margin: 0 10px 5px; border: 1px solid gray" />
VOTRE TEXTE ICI<br>
</div>

<div id="tcontent2" class="tabcontent">
<img src="image2.jpg" style="float: left; margin: 0 10px 5px; border: 1px solid gray" />
VOTRE TEXTE ICI<br>
<a href="javascript: expandtab('maintab', 3)">Ciquez ici pour aller au tab quatre</a>
</div>

.............................................

Autant de div que d'onglets voulus, en respectant bien la numérotation des onglets et des id dans les div

Dans le même esprit

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront