Comment réaliser cette boite ?

[Zen_Spirit]

Bonjour tout le monde.

1/ Je suis allé sur un site de l'olympique de marseille.

Et je voudrai savoir comment réaliser çà ( je vous explique d'abord et je vous donne l'adresse du site après ) :

-lorsque l'on clique sur les onglets "Informations" ou "Historique" ou "Palmarès" ou "en quelques mots" il y a des informations qui apparaissent sans qu'aucune nouvelle page se charge et réaparait.

-de plus c'est pas du Flash

Je ne sais pas si je me suis bien exliqué.

(Voici le lien : ICI

Sur un autre forum, on me dit que c'est du javascript, hors je ne vois aucun javascript à coté du code html, ou script , ... .

Voici un autre lien avec la même boite avec le même effet: Ici l'autre modèle ( voir les onglets "create", "modify", "style themes" "buy now )"

Merci à vous.

[Régis]

Sur un autre forum, on me dit que c'est du javascript, hors je ne vois aucun javascript à coté du code html, ou script , ... .

Bonjour Zen_Spirit,

Je ne suis pas un pro du code. Les pros te répondront sûrement... mais une chose est certaine : si tu désactives le javascript de ton navigateur, tu t'apercevras qu'aucun des 2 menus ne fonctionnent...

[adn]

Salut,

Je ne suis pas entré dans le détail, mais il s'agit effectivement de javascript. Tout d'abord en html, un certain nombre d'objets ont été définis avec des class associées dont les attributs de présentations sont dans les fichiers CSS.

Le code HTML en question:

<div id="dTab1-0">
	<ul class="listonglet">
		<li class="informations actif"><a href="#">Informations</a></li>
		<li class="historique"><a href="#">Historique</a></li>
		<li class="palmares"><a href="#">Palmarès</a></li>
		<li class="enquelquesmots"><a href="#">En quelques mots</a></li>
		<li class="dTabPrevious prev on"><a href="#"><</a></li>
		<li class="dTabNext next on"><a href="#">></a></li>
	</ul>
</div>

Ensuite tu peux constater qu'il y un déclaratif d'inclusion de fichier java script:

<script type="text/javascript" src="/js/std.js"></script>

Le fichier se trouve à cette adresse si tu veux le consulter:

http://www.om.net/js/std.js

Et dedans tu trouveras des functions de gestion de l'affichage (visibilité ou pas des différents objets) comme:

function dTabFct_clicTab() ==> gestion du clic sur un onglet
function dTabFct_nextTab() ==> gestion du NEXT
etc...

[Zen_Spirit]

Salut REGIS et ADN !

Merci d'avoir répondu et pour tes explications.

ADN merci encore pour les détails.

1- Cependant, quel est le lien entre le fichier

http://www.om.net/js/std.js

et non pas la page mais le cadre ( dans lequel il y a ces onglets qui donnent des informations au clic et sans changement de page ).

Car au niveau des codes html faisant réference au cadre, à aucun moment il y a nom au texte qui fait réfenrence à ce fichier ou qui fait appel à ce fichier. :

<div id="dTab1-0">

<ul class="listonglet">

<li class="informations actif"><a href="#">Informations</a></li>

<li class="historique"><a href="#">Historique</a></li>

<li class="palmares"><a href="#">Palmarès</a></li>

<li class="enquelquesmots"><a href="#">En quelques mots</a></li>

<li class="dTabPrevious prev on"><a href="#"><</a></li>

<li class="dTabNext next on"><a href="#">></a></li>

</ul>

</div>

Effectivement, il y a le

<script type="text/javascript" src="/js/std.js"></script>

en haut au début dans le fichier html, mais moi ce que je veux savoir c'est comment il fait appel à la fonction précise du fichier : " http://www.om.net/js/std.js "

Car il y a le " dTab1-0 " mais pas de " dTabFct " dans le fichier HTML, d'autant plus que dans le fichier javascript auquel il fait appel, il y a pleins de fonctions avec " dTab "comme " dTab_getPos(id, elt) ".

2 - Ou pourrai je trouver ce code javascript. ( Sur quel site, car je cherche depuis un moment mais sans résultat ).

Merci à vous de m'aider.

Modifié 12 Septembre 2006 par Zen_Spirit

[freemaster]

salut,

un exemple http://www.ccim.be/ccim328/trucs/menu06.html qui peut t'aider à comprendre

[ajpg]

Bonsoir,

Voir également : http://moncastel.9online.fr/onglets/double.html

La navigation clavier est possible.

[Zen_Spirit]

Salut ajpg !

Merci pour le lien que tu m'as donné !

1 - Il très bien et l'exemple pour débuter c'est mieux.

Cependant, après avoir passé 3 heures et demi sur le codage html, css et les fichiers javascript de la page, j'ai toujours du mal à comprendre la mise en place de ce genre de script. En fait, je me perds dans la relation entre ces 3 fichiers.

Il ya trop de fichiers déjà entre les balises "head".

Je n'arrive pas trouver le fichier faisant référence au bon script qui fait apparaitre l'image de la pomme ou bannane ou carotte.

ICI l'exemple

<head>

<title>Tabbed panels</title>

<link rel="stylesheet" href="/ui/ui.css" />

<link rel="stylesheet" href="/js/i.css" />

<script type="text/javascript" src="/js/mb/mb.js"></script>

<script type="text/javascript" src="tp.js"></script>

<link rel="stylesheet" href="tp.css" />

</head>

On peut s'apercevoir qu'il y a 3 fichiers CSS et 2 fichiers javascript.

C'est un peu trop compliqué pour moi à comprendre la relation. Pourtant je connais le CSS, car j'en utilise, mais là, moi je me perds pour la réalisation de cadre qui affiche des images au clic sans chargement d'une nouvelle page.

2 - A quoi correspondent :

<h2>Example</h2>

...<div id="fruit">

......<h4>Menu</h4>

..............<ul>

...................<li><a href="#tp1">Link to panel one</a></li>

...................<li><a href="#tp2">Link to panel two</a></li>

...................<li><a href="#tp3">Link to panel three</a></li>

...............</ul>

...</div>

D'autant plus que le : <h4>Menu</h4>, je ne vois pas à quoi il fait référence sur le site.

2 - Après, il y a les :

</div>

<div id="tp1" title="Apple">

.....<h4>Apple</h4>

..........<img src="eg/apple.gif" alt="Picture of an Apple" />

</div>

<div id="tp2" title="Banana">

.....<h4>Banana</h4>

..........<img src="eg/banana.gif" alt="Picture of a Banana" />

</div>

<div id="tp3" title="Carrot">

.....<h4>Carrot</h4>

..........<img src="eg/carrot.gif" alt="Picture of a Carrot" />

</div>

</div>

Ici les tp1 - tp2 - tp3 correspondent à quoi ? A des blocs !

3 - C'est quoi tous ces liens " fichiers js ", d'où sortent ils ? A quoi font 'il référence ? mais combien de fichier js faut'il pour réaliser ce cadre ?

<ul id="m">

<li id="mmenus"><a href="/js/menus/">Menus</a>

<ul>

<li><a href="/js/xc/">Expanding menu</a></li>

<li><a href="/js/mb/">Popup menu</a></li>

</ul></li>

<li id="mwidgets"><a href="/js/widgets/">UI widgets</a>

<ul>

<li><a href="/js/tp/">Tabbed panels</a></li>

<li><a href="/js/w/">Popup browser windows</a></li>

<li class="alpha"><a href="/js/fv/">Form validation</a></li>

<li class="alpha"><a href="/js/mdi/">MDI script</a></li>

</ul></li>

<li id="mcode"><a href="/js/code/">Source code</a>

<ul>

<li><a href="/js/code/#html">HTML</a>

<ul>

<li><a href="/js/xc/code/">Expanding menu HTML</a></li>

<li><a href="/js/tp/code/">Tabbed panels HTML</a></li>

</ul></li>

<li><a href="/js/code/#js">Javascript</a>

<ul>

<li><a href="/js/xc/code/js.html">Expanding menu script</a></li>

<li><a href="/js/w/code/js.html">Popup browser windows</a></li>

<li><a href="/js/tp/code/js.html">Tabbed panels</a></li>

</ul></li>

<li><a href="/js/code/#css">Stylesheets</a>

<ul>

<li><a href="/js/xc/code/css.html">Expanding menu styles</a></li>

</ul></li>

</ul></li>

</ul>

4 - Mais comment se fait la mise en place de ce cadre dynamique qui affiche ... (Rrrr, j'ai les nerfs !!! )

Désolé, mais c'est vrai que c'est très agaçant quand on passe des heures et des heures et qu'on n'y arrive pas à comprendre 10% de la réalisation finale.

Pourtant je vois bien votre aide, mais s'il vous plaît, y aurait'il quelqu'un qui pourrai m'accorder quelques minutes sur MSN pour m'aider à comprendre cet exemple. Moi ce que je veux c'est comprendre pour pouvoir réaliser çà après car on a un projet de site.

MERCI à vous. Aller, je me calme.

MERCI

[ajpg]

Ne le prends pas mal, mais d'après les questions posées, je pense que tu devrais commencer par une mise en page plus classique, moins problématique.

sinon, pour répondre aux questions :

1) sans regarder, je suppose qu'il s'agit des deux fichiers tp (tp.css, tp.js) ;

2) il s'agit d'un menu présent au cas où Javascript est désactivé, pour facilité la navigation ;

3) rien à voir, c'est le menu du site (ou de cette catégorie du site)...

4) voir le tout début de ce message

Modifié 13 Septembre 2006 par ajpg