Sujets similaires

Sujet: Problème avec les onglets Mer 02 Mar 2011, 04:36

Bonjour, je pense que ma question n'a pas déjà été posé, si c'est le cas je m'en excuse * mode boulet on*
Alors voilà, j'ai tenté de modifier ma PA, et je voulais que les membres du staff apparaissent sous forme d'onglet changeant au passage de la souris. J'ai trouvé un tutorial qui fonctionnait très bien jusqu'à ce que je rajoute un cinquième onglet. L'image est bien visible, mais je ne vois pas le contenu quand je passe ma souris dessus.
J'ai bidouillé l'engin comme j'ai pu mais rien n'y fait, je n'arrive pas à afficher le contenu T-T

Voici mon code:

Spoiler:

Code:: <table width="30%" border="0" cellspacing="1" cellpadding="0"><tr><tbody><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><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>


<table width="40%"><tr>
<td width="20%"><div class="onglet" onmouseover="javascript:patonglet1()"><img src="http://s7.tinypic.com/2u9494h_th.jpg" class="gradualfader imcateg"></div></td>
<td width="20%"><div class="onglet" onmouseover="javascript:patonglet2()"><img src="http://s7.tinypic.com/eur0j8_th.jpg" class="gradualfader imcateg"></div></td>
<td width="20%"><div class="onglet" onmouseover="javascript:patonglet3()"><img src="http://s7.tinypic.com/11uvv4n_th.jpg" class="gradualfader imcateg"></div></td></tr></table>

<table width="40%"><tr width="40%"><td width="40%">

<div id="onglet1"><div class="message">
<table width="100%" border="0" cellpadding="10" cellspacing="1">
<tr>
<td style="text-align: center;" width="100%"><span class="gensmall"><div class="bloc" id="div_1" style="z-index: 5; "><img src="http://i56.tinypic.com/2hmkl6e.jpg" align="center"><br>
<font style="font-family:georgia;text-transform:uppercase;font-size:18px;letter-spacing:-2px; text-shadow:1px 1px 3px #d9d8d5; color:#;">BLA BLA BLA</font><br><br>
<a href="" class="postlink" target="_blank">voir profil</a> <a href="" class="postlink" target="_blank">contacter</a></div></span>
</td></tr></table></div></div>


<div id="onglet2" style="display: none;"><div class="message"><table width="100%" border="0" cellpadding="10" cellspacing="1"><tr><td style="text-align: center;" width="100%"><div class="bloc" id="div_2" style="z-index: 5; "><img src="http://i56.tinypic.com/2hmkl6e.jpg" align="center"><br>
<font style="font-family:georgia;text-transform:uppercase;font-size:18px;letter-spacing:-2px; text-shadow:1px 1px 3px #d9d8d5; color:#;">BLA BLA BLA</font><br>
administrateur<br>
<a href="" class="postlink" target="_blank">voir profil</a> <a href="" class="postlink" target="_blank">contacter</a> </div>
</td></tr></table></div></div>


<div id="onglet4" style="display: none;"><div class="message"><table width="100%" border="0" cellpadding="10" cellspacing="1"><tr><td style="text-align: center;" width="100%"><div class="bloc" id="div_2" style="z-index: 5; "><img src="http://i56.tinypic.com/2hmkl6e.jpg" align="center"><br>
<font style="font-family:georgia;text-transform:uppercase;font-size:18px;letter-spacing:-2px; text-shadow:1px 1px 3px #d9d8d5; color:#;">BLA BLA BLA</font><br>
modo<br>
<a href="" class="postlink" target="_blank">voir profil</a> <a href="" class="postlink" target="_blank">contacter</a> </div>
</td></tr></table></div></div>


<div id="onglet3" style="display: none;">
<div class="message"><table width="100%" border="0" cellpadding="10" cellspacing="1"><tr><td style="text-align: center;" width="100%"><div class="bloc" id="div_4" style="z-index: 14; "><img src="http://i56.tinypic.com/2hmkl6e.jpg" align="center"><br>
<font style="font-family:georgia;text-transform:uppercase;font-size:18px;letter-spacing:-2px; text-shadow:1px 1px 3px #d9d8d5; color:#;">BLA BLA BLA</font><br>
administratrice<br>
<a href="" class="postlink" target="_blank">voir profil</a> <a href="" class="postlink" target="_blank">contacter</a> </div>
</td></tr></table></div>


<div id="onglet5" style="display: none;"><div class="message"><table width="100%" border="0" cellpadding="10" cellspacing="1"><tr><td style="text-align: center;" width="100%"><div class="bloc" id="div_2" style="z-index: 5; "><img src="http://i56.tinypic.com/2hmkl6e.jpg" align="center"><br>
<font style="font-family:georgia;text-transform:uppercase;font-size:18px;letter-spacing:-2px; text-shadow:1px 1px 3px #d9d8d5; color:#;">BLA BLA BLA</font><br>
administrateur<br>
<a href="" class="postlink" target="_blank">contacter</a> </div>
</td></tr></table></div></div>

</td></tr></table>
</div></div>


<table width="40%"><tr>
<td width="20%"><div class="onglet" onmouseover="javascript:patonglet4()"><img src="http://s7.tinypic.com/2zfle8m_th.jpg" class="gradualfader imcateg"></div></td>
<td width="20%"><div class="onglet" onmouseover="javascript:patonglet5()"><img src="http://s7.tinypic.com/25h1q9g_th.jpg" class="gradualfader imcateg"></div></td></tr></table>
</td></tr></table></td></tr></tbody></table>

J'avais une autre question aussi Oo vu la taille du code, serait-il possible de le coller dans une page HTML et de l'insérer sous forme d'iframe sur ma PA?
Merci d'avance pour votre aide et vos réponse Smack Smack

<3

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 04:48

Bonjour,

Merci de donner l'adresse du forum pour le codeur qui prendra ce problème en charge Wink

Bonne journée.

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 04:51

Niah voui pardon
La voici

Spoiler:

<3

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:37

Yo'

Dans ton javascript :

trouve >

Code:: 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>

Et remplace le par:

Code:: function patonglet5() { 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='block'; }</script>

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:39

Han c'est niquel ça marche superr Smack Smack

Merci beaucoup Calins

<3

J'aurai une autre question du coup Oo il faut faire un truc particulier pour mettre un onglet 'par défaut', pour qu'il s'affiche quand on actualise la page?

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:44

display : none > invisible

display : block > visible

Bravo !

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:46

Ca ne marche pas =S
Ca m'affiche l'onglet en question dans tous les autres, mais quand j'actualise je ne le vois pas

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:51

En gros, tu veux qu' un onglet reste afficher ?

Dis moi lequel Wink

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:51

Vouip, parce que sinon ça fait décalage avec le reste Oo
Le premier Very Happy

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:54

Hmm, pourtant quand je test le code chez moi, le 1er onglet est déjà afficher :/

Sujet: Re: Problème avec les onglets Mer 02 Mar 2011, 08:55

Ben sur mon fo' test quand j'actualise ou quoi, mes deux rangées d'icons sont collées, comme s'il n'y avait rien entre Oo

Sujet: Re: Problème avec les onglets Lun 07 Mar 2011, 09:01

Bonjour,

en effet chez moi aussi aucun onglet n'est affiché par défauts, essai de remplacer ceci :

Code:: <div id="onglet1">

par ceci :

Code:: <div id="onglet1" style="display:block;">

PS : en ce qui concerne le fait de mettre une iframe, c'est en effet possible ^^

Problème avec les onglets

Problème avec les onglets

Sujets similaires

Sujets similaires

Partenaires Or