Tableau à onglets : onglet permanent.

[Invité]

Bonjour à tous. Je viens poster ici parce que j'ai besoin de votre aide.
J'ai réussi à intégrer un tableau à onglets dans ma PA comme je le souhaitais, pour afficher le staff du forum, seulement j'aimerai ajouter un détail que je ne parviens pas à trouver seule.
Mes onglets s'affichent sans soucis au passage de la souris, mais j'aimerai que tant qu'on ne touche pas aux onglets, il y ait un "onglet permanent", c'est à dire un affichage qui revient dès qu'on retire la souris d'un onglet.
J'espère avoir été claire, je poste ci-après le code inscrit dans Généralités, merci d'avance à tout ceux qui me viendront en aide.

Code:

<script type="text/javascript">
function patonglet1() { document.getElementById('onglet1').style.display='block'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none'; }

function patonglet2() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='block';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';}


function patonglet3() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block'; document.getElementById('onglet4').style.display='none';}


function patonglet4() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='block';}</script>

<!-- BARRE D'ONGLETS -->
<center><table width="100%"><tbody><tr>
                  <td width="25%"><div class="onglet" onmouseover="javascript:patonglet1()"><center><img src="http://img35.imageshack.us/img35/5079/8vj.png" class="cadreteam" /><center></center></center></div></td>
                  <td width="25%"><div class="onglet" onmouseover="javascript:patonglet2()"><center><img src="http://img571.imageshack.us/img571/427/z9i.png"" class="cadreteam" /></center></div></td>
        <td width="25%"><div class="onglet" onmouseover="javascript:patonglet3()"><center><img src="http://img5.imageshack.us/img5/4959/3gg4.png" class="cadreteam" /><center></center></center></div></td>
        <td width="25%"><div class="onglet" onmouseover="javascript:patonglet4()"><center><img src="http://img19.imageshack.us/img19/985/yny6.png" class="cadreteam" /><center></center></center></div></td>
</tr></tbody></table></center>

<table width="100%">
              <tbody><tr width="100%">
                <td width="100%">
<!-- PREMIER MODULE -->
                    <div id="onglet1" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>
                
<!-- TROISIEME MODULE -->                
                    <div id="onglet2" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=> contact</a></div></span>
</div>

                    <div id="onglet3" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>

                    <div id="onglet4" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>                    </div>                </td>            </tr>            </tbody></table>

        </div></div></td>

[[AoH]Insane]

J'ai quelques question, ensuite, je ferrai de mon mieux pour t'aider. Par Onglet permanent que veux-tu exactement? Que lorsqu'il y a un onmouseout que les onglets retourne à celui de base qui serait, par exemple, l'onglet 1? Si oui, alors je penses pouvoir t'aider.

Merci pour ces petits détails

En espérant pouvoir aider

[AoH]Insane

[Invité]

D'abord merci de ton intervention rapide !
C'est bien ça que j'entends oui, qu'un onglet soit constamment affiché quand la souris n'est pas sur les autres, mais bien-sûr que les autres onglets s'ouvrent au passage de la souris !
J'espère que je me suis faite comprendre

[[AoH]Insane]

Oui, alors il faudrait faire en sorte que lorsqu'il n'y a rien, une fonction retourne ceci (pour suivre mon exemple de l'onglet 1):

Code:

{ document.getElementById('onglet1').style.display='block'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none'; }

Alors c'est assez simple; ton code JavaScript peux rester le même, ce que tu dois changer c'est ceci:

Code:

<!-- BARRE D'ONGLETS -->
<center><table width="100%"><tbody><tr>
                  <td width="25%"><div class="onglet" onmouseover="javascript:patonglet1()"><center><img src="http://img35.imageshack.us/img35/5079/8vj.png" class="cadreteam" /><center></center></center></div></td>
                  <td width="25%"><div class="onglet" onmouseover="javascript:patonglet2()"><center><img src="http://img571.imageshack.us/img571/427/z9i.png"" class="cadreteam" /></center></div></td>
        <td width="25%"><div class="onglet" onmouseover="javascript:patonglet3()"><center><img src="http://img5.imageshack.us/img5/4959/3gg4.png" class="cadreteam" /><center></center></center></div></td>
        <td width="25%"><div class="onglet" onmouseover="javascript:patonglet4()"><center><img src="http://img19.imageshack.us/img19/985/yny6.png" class="cadreteam" /><center></center></center></div></td>
</tr></tbody></table></center>
 
<table width="100%">
              <tbody><tr width="100%">
                <td width="100%">
<!-- PREMIER MODULE -->
                    <div id="onglet1" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>
               
<!-- TROISIEME MODULE -->               
                    <div id="onglet2" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=> contact</a></div></span>
</div>
 
                    <div id="onglet3" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>
 
                    <div id="onglet4" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>                    </div>                </td>            </tr>            </tbody></table>
 
        </div></div></td>

Et le remplacer par cela:

Code:

<!-- BARRE D'ONGLETS -->
<center><table width="100%"><tbody><tr>
                  <td width="25%" onmouseout="javascript:patonglet1()"><div class="onglet" onmouseover="javascript:patonglet1()"><center><img src="http://img35.imageshack.us/img35/5079/8vj.png" class="cadreteam" /><center></center></center></div></td>
                  <td width="25%" onmouseout="javascript:patonglet1()"><div class="onglet" onmouseover="javascript:patonglet2()"><center><img src="http://img571.imageshack.us/img571/427/z9i.png"" class="cadreteam" /></center></div></td>
        <td width="25%" onmouseout="javascript:patonglet1()"><div class="onglet" onmouseover="javascript:patonglet3()"><center><img src="http://img5.imageshack.us/img5/4959/3gg4.png" class="cadreteam" /><center></center></center></div></td>
        <td width="25%" onmouseout="javascript:patonglet1()"><div class="onglet" onmouseover="javascript:patonglet4()"><center><img src="http://img19.imageshack.us/img19/985/yny6.png" class="cadreteam" /><center></center></center></div></td>
</tr></tbody></table></center>
 
<table width="100%">
              <tbody><tr width="100%">
                <td width="100%">
<!-- PREMIER MODULE -->
                    <div id="onglet1" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>Test</a> ✈ <a href=>Testt!</a></div></span></div>
               
<!-- TROISIEME MODULE -->               
                    <div id="onglet2" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=> contact</a></div></span>
</div>
 
                    <div id="onglet3" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>
 
                    <div id="onglet4" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=>profil</a> ✈ <a href=>contact</a></div></span></div>                    </div>                </td>            </tr>            </tbody></table>
 
        </div></div></td>

En espérant avoir aidé

[AoH]Insane

[Invité]

Encore merci de ton aide, qui m'a permis de régler une partie de mon problème; le dernier détail qui reste, c'est que j'aimerai que cet onglet soit déjà ouvert dès qu'on ouvre la page, qu'il soit tout le temps là en fait, je sais pas si je m'exprime bien ou pas :/
Pour clarifier je te montre, j'ai fait un nouvel onglet qui n'a pas d'image pour être ouvert, et ça donne ça :
J'aimerai donc que cet onglet soit tout le temps affiché, dès le chargement de la page internet, c'est faisable ?
Je te montre mon code modifié du coup :

Code:

<script type="text/javascript">
function patonglet1() { document.getElementById('onglet1').style.display='block'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';}

function patonglet2() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='block';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';}


function patonglet3() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';}


function patonglet4() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='block';
document.getElementById('onglet5').style.display='none';}

function patonglet5() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='block';}</script>

<!-- BARRE D'ONGLETS -->
<center><table width="100%"><tbody><tr>
                  <td width="25%" onmouseout="javascript:patonglet2()"><div class="onglet" onmouseover="javascript:patonglet2()"><center><img src="http://img35.imageshack.us/img35/5079/8vj.png" class="cadreteam" /><center></center></center></td>
                  <td width="25%" onmouseout="javascript:patonglet3()"><div class="onglet" onmouseover="javascript:patonglet3()"><center><img src="http://img571.imageshack.us/img571/427/z9i.png"" class="cadreteam" /></center></td>
                  <td width="25%" onmouseout="javascript:patonglet4()"><div class="onglet" onmouseover="javascript:patonglet4()"><center><img src="http://img5.imageshack.us/img5/4959/3gg4.png" class="cadreteam" /><center></center></center></td>
                  <td width="25%" onmouseout="javascript:patonglet5()"><div class="onglet" onmouseover="javascript:patonglet5()"><center><img src="http://img19.imageshack.us/img19/985/yny6.png" class="cadreteam" /><center></center></center></td>
</tr></tbody></table></center>
 
<table width="100%">
              <tbody><tr width="100%">
                <td width="100%">
<!-- PREMIER MODULE -->
                    <div id="onglet1" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><br><span class=patitle>la dream team</span></div></span></div>
             
<!-- TROISIEME MODULE -->
                  <div id="onglet2" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=><strong>profil</strong></a> ✈ <a href=><strong>contact</strong></a></div></span></div>

                    <div id="onglet3" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=><strong>profil</strong></a> ✈ <a href=><strong>contact</strong></a></div></span></div>
 
                    <div id="onglet4" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=><strong>profil</strong></a> ✈ <a href=><strong>contact</strong></a></div></span></div>
 
                    <div id="onglet5" style="display: none;"><span class=q4><div style="margin:auto;text-align:center;width:100%"><span class=wname>prénom nom</span><br><span class=imp>fonction - pseudo</span><br><a href=><strong>profil</strong></a> ✈ <a href=><strong>contact</strong></a></div></span></div>                    </div>                </td>            </tr>            </tbody></table>
 
        </div></div></td>

[[AoH]Insane]

Tu dois uniquement ajouter une fonction onload. Donc disons que [...] est équivalent à ton code actuel :

Code:

<body onload="patonglet1()">
[...]
</body>

Ça c'est pour faire en sorte qu'au chargement de la page, ce soit l'onglet 1 qui soit affiché, rien d'autre. Ensuite pour qu'il soit constamment affiché, peu importe les onglets choisi, voici le nouveau code JavaScript:

Code:

<script type="text/javascript">
function patonglet1() { document.getElementById('onglet1').style.display='block';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';}
 
function patonglet2() { document.getElementById('onglet1').style.display='block';
document.getElementById('onglet2').style.display='block';
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';}
 
 
function patonglet3() { document.getElementById('onglet1').style.display='block';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';}
 
 
function patonglet4() { document.getElementById('onglet1').style.display='block';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='block';
document.getElementById('onglet5').style.display='none';}
 
function patonglet5() { document.getElementById('onglet1').style.display='block';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='block';}</script>

Avec ce code, l'onglet 1 sera toujours affiché! Par contre, je ne sais pas à quoi ressemble l'emplacement des objets sur la page de ton Forum, alors si tu as de nouveaux problèmes, je serai ravis d'y répondre!

En espérant avoir aidé

[AoH]Insane

[Invité]

Merci beaucoup mon problème est réglé, c'est exactement ce que je voulais ! En plus j'ai appris de nouvelles notions, encore merci à toi