Onglets qeel

par Astérion Mar 2 Aoû 2011 - 14:14

Bien le bonsoir !
J'ai une question relative à un template modifié par une assistactive ( encore merci à elle). En fait, j'aimerais avoir le premier onglet de mon qeel ouvert au lieu d'avoir un vide et je ne sais pas comment m'y prendre (ni si cela est possible avec ce script). Je remercie d'avance ceux et celles qui pourront m'aider ^^
Cordialement.

Code::  <center><table width="730" cellspacing="5" cellpadding="1"> <tr> <td colspan="2" align="center"> <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /> </td> </tr> <tr> <td colspan="2" class="groupes"> <center> <SCRIPT type=text/javascript> function changeOnglet(_this){ var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li'); for(var i = 0; i < getOnglets.length; i++){ if(getOnglets[i].id){ if(getOnglets[i].id == _this.id){ getOnglets[i].className = 'mon_onglet_selected'; document.getElementById('c' + _this.id).style.display = 'block'; } else{ getOnglets[i].className = 'mon_onglet'; document.getElementById('c' + getOnglets[i].id).style.display = 'none'; } } } } </SCRIPT> <DIV id=Fanasia> <DIV id=mes_onglets> <UL> <table cellspacing="1" cellpadding="1"> <tr> <td class="zgroupes"> <LI id=o_1 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g11-pnj"><font color="#d93f32"> GODS </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_2 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g12-adults"><font color="#FFF"> ADULTS </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_3 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g3-envy"><font color="#980819"> ENVY </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_4 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g4-greed"><font color="#E67D22"> GREED </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_5 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g5-gluttony"><font color="#B17F98"> GLUTTONY </span></a> </LI> </td> <td class="zgroupes"> <LI id=o_6 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g7-lust"><font color="#5CDF72"> LUST </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_7 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g8-pride"><font color="#980852"> PRIDE </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_8 class=mon_onglet_selected onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g9-sloth"><font color="#F76AA5"> SLOTH </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_9 class=mon_onglet_selected onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g10-wrath"><font color="#675C52"> WRATH </font></a> </LI> </td> </tr> </table> </UL> </DIV> </center> </td> </tr> <tr> <td width="365" height="270" valign="top"> <span class="gensmall"> {TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}, nous lui souhaitons la bienvenue ! </span> <br ><br > <span class="gensmall"> {LOGGED_IN_USER_LIST}</span>  <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}  <div id="chatbox_popup"></div> <script type="text/javascript"> //<![CDATA[ insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}'); //]]> </script>  </span>  <br ><span class="gensmall">{TOTAL_USERS_ONLINE}. {RECORD_USERS}. </span> <br ><br > <div style="overflow: auto; width: 360px; height: 90px;" class="window" align="center"><table>{L_CONNECTED_MEMBERS}</table></div> </td> <td width="360" align="center"> <table width="100%"> <tr> <td class="parttittle"> NOS TOP PARTENAIRES </td> </tr> <tr> <td class="partzone"> <div style="overflow: auto; width: 360px; height: 250px;" class="window" align="center"> <a href="http://endlessuntildeath.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img41.xooimage.com/files/7/4/5/21j7n8k-2772f4b-copie-288e658.png" border="0" alt="" /></a> <a href="http://auroria.forumactif.biz/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i55.tinypic.com/29zfah.jpg" border="0" alt="" /></a> <a href="http://chicago-swop.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i28.servimg.com/u/f28/16/18/33/72/100-3511.jpg" border="0" alt="" /></a> <a href="http://endless-war.forums-rpg.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://www.noelshack.com/old/up/image_15-f552fc1046.png" border="0" alt="" /></a> <a href="http://saigo-chanbara-rpg.forums-rpg.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://img4.hostingpics.net/pics/249231100x35.jpg" border="0" alt="" /></a> <a href="http://reinventeladestinee.forumactif.com/forum." class="postlink" target="_blank" rel="nofollow"> <img src="http://i21.servimg.com/u/f21/13/31/07/48/314qir10.jpg" border="0" alt="" /></a> <a href="http://lycee-arcenciel.forumsactifs.com/forum.htm" class="postlink" target="_blank" rel="nofollow"> <img src="http://illiweb.com/fa/pbucket.gif" border="0" alt="" /></a> <a href="http://karnevale-avenue.forumactif.org/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i21.servimg.com/u/f21/13/31/07/48/11842710.jpg" border="0" alt="" /></a> <a href="http://pokemon-tsuki.forumsactifs.com" class="postlink" target="_blank" rel="nofollow"> <img src="http://img11.hostingpics.net/pics/219181lyezb222.png" border="0" alt="" /></a> <a href="http://nakunaru-academy.chocoforum.net/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i23.servimg.com/u/f23/15/23/14/47/aaaaa_11.jpg" border="0" alt="" /></a> <a href="http://i-d-s.creerforum.net" class="postlink" target="_blank" rel="nofollow"> <img src="http://i56.tinypic.com/j5l9ad.png" border="0" alt="" /></a> <a href="http://redgarden.forumactif.com/forum.htm" class="postlink" target="_blank" rel="nofollow"> <img src="http://img854.imageshack.us/img854/9097/basebouton.png" border="0" alt="" /></a> <a href="http://www.rpgnana.org/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i77.servimg.com/u/f77/15/37/95/51/10035-11.jpg" border="0" alt="" /></a> <a href="http://crazy-tale.forumactif.org/forum" class="postlink" target="_blank" rel="nofollow"> <img src="http://img4.hostingpics.net/pics/408891Sanstitre14.png" border="0" alt="" /></a> <a href="http://omerta.forum-canada.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://img4.hostingpics.net/pics/36161610035.png" border="0" alt="" /></a> <a href="http://after-tea.bbfr.net/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i28.servimg.com/u/f28/14/08/01/62/100x3510.png" border="0" alt="" /></a> <a href="http://pandora-no-kokoro.superforum.fr/forum.htm" class="postlink" target="_blank" rel="nofollow"> <img src="http://i22.servimg.com/u/f22/15/82/36/63/bouton12.jpg" border="0" alt="" /></a> <a href="http://floral-fascination.forumsactifs.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i55.tinypic.com/98siky.png" border="0" alt="" /></a> <a href="http://ile-joyaux.forumactif.org"> <img src="http://i21.servimg.com/u/f21/12/51/23/66/10011.jpg" border="0" alt="" /></a> </div> </td> </tr> </table> </td> </tr> <tr> <td colspan="2" class="descgroupes"> <DIV id=mes_contenus> <DIV style="DISPLAY: none" id=co_1 class=mon_contenu> description groupe 1 </DIV> <DIV style="DISPLAY: none" id=co_2 class=mon_contenu> description groupe 2 </DIV> <DIV style="DISPLAY: none" id=co_3 class=mon_contenu> description groupe 3 </DIV> <DIV style="DISPLAY: none" id=co_4 class=mon_contenu> description groupe 4 </DIV> <DIV style="DISPLAY: none" id=co_5 class=mon_contenu> description groupe 5 </DIV> <DIV style="DISPLAY: none" id=co_6 class=mon_contenu> description groupe 6 </DIV> <DIV style="DISPLAY: none" id=co_7 class=mon_contenu> description groupe 7 </DIV> <DIV style="DISPLAY: none" id=co_8 class=mon_contenu> description groupe 8 </DIV> <DIV style="DISPLAY: none" id=co_9 class=mon_contenu> description groupe 9 </DIV> </div></div> </td> </tr> <tr> <td colspan="2" class="menleg"> The Other Side est la propriété <u> totale </u>de ses fondateurs & administrateurs, <strong>toute copie</strong> partielle <br > ou totale sera sanctionnée. Merci de respecter notre travail.</font> </div> </td> </tr> </table></center>

par Astérion Jeu 4 Aoû 2011 - 16:29

Petit up

par **Lixyr** Jeu 4 Aoû 2011 - 23:18

Bonsoir.

J'ai modifié votre code de façon à ce que votre premier groupe soit affiché dès l'affichage de la page, et non pas une fois le passage de la souris fait.

J'ai donc modifié ceci :

<LI id=o_1 class=mon_onglet_selected onmouseover=changeOnglet(this);>

(j'ai rajouté, en rose, _selected, afin que l'onglet qui soit affiché en premier ait une apparence différente des autres. Cependant, si vous ne modifiez pas cette classe via le css, en utilisant ce code :

Code:: .mon_onglet_selected {code ; et code ; etc ; }

et bien votre onglet restera comme les autres.

et ensuite :

<DIV id=co_1 class=mon_contenu>

j'ai retiré le style="DISPLAY: none" dans la div, qui empêchait l'affichage du premier onglet avant le passage de la souris.

Ce qui donne, en tout, ceci :

Code::  <center><table width="730" cellspacing="5" cellpadding="1"> <tr> <td colspan="2" align="center"> <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /> </td> </tr> <tr> <td colspan="2" class="groupes"> <center> <SCRIPT type=text/javascript> function changeOnglet(_this){ var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li'); for(var i = 0; i < getOnglets.length; i++){ if(getOnglets[i].id){ if(getOnglets[i].id == _this.id){ getOnglets[i].className = 'mon_onglet_selected'; document.getElementById('c' + _this.id).style.display = 'block'; } else{ getOnglets[i].className = 'mon_onglet'; document.getElementById('c' + getOnglets[i].id).style.display = 'none'; } } } } </SCRIPT> <DIV id=Fanasia> <DIV id=mes_onglets> <UL> <table cellspacing="1" cellpadding="1"> <tr> <td class="zgroupes"> <LI id=o_1 class=mon_onglet_selected onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g11-pnj"><font color="#d93f32"> GODS </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_2 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g12-adults"><font color="#FFF"> ADULTS </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_3 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g3-envy"><font color="#980819"> ENVY </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_4 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g4-greed"><font color="#E67D22"> GREED </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_5 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g5-gluttony"><font color="#B17F98"> GLUTTONY </span></a> </LI> </td> <td class="zgroupes"> <LI id=o_6 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g7-lust"><font color="#5CDF72"> LUST </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_7 class=mon_onglet onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g8-pride"><font color="#980852"> PRIDE </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_8 class=mon_onglet_selected onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g9-sloth"><font color="#F76AA5"> SLOTH </font></a> </LI> </td> <td class="zgroupes"> <LI id=o_9 class=mon_onglet_selected onmouseover=changeOnglet(this);> <a href="http://pensionnat-rpg.forums-actifs.net/g10-wrath"><font color="#675C52"> WRATH </font></a> </LI> </td> </tr> </table> </UL> </DIV> </center> </td> </tr> <tr> <td width="365" height="270" valign="top"> <span class="gensmall"> {TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}, nous lui souhaitons la bienvenue ! </span> <br ><br > <span class="gensmall"> {LOGGED_IN_USER_LIST}</span>  <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}  <div id="chatbox_popup"></div> <script type="text/javascript"> //<![CDATA[ insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}'); //]]> </script>  </span>  <br ><span class="gensmall">{TOTAL_USERS_ONLINE}. {RECORD_USERS}. </span> <br ><br > <div style="overflow: auto; width: 360px; height: 90px;" class="window" align="center"><table>{L_CONNECTED_MEMBERS}</table></div> </td> <td width="360" align="center"> <table width="100%"> <tr> <td class="parttittle"> NOS TOP PARTENAIRES </td> </tr> <tr> <td class="partzone"> <div style="overflow: auto; width: 360px; height: 250px;" class="window" align="center"> <a href="http://endlessuntildeath.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img41.xooimage.com/files/7/4/5/21j7n8k-2772f4b-copie-288e658.png" border="0" alt="" /></a> <a href="http://auroria.forumactif.biz/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i55.tinypic.com/29zfah.jpg" border="0" alt="" /></a> <a href="http://chicago-swop.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i28.servimg.com/u/f28/16/18/33/72/100-3511.jpg" border="0" alt="" /></a> <a href="http://endless-war.forums-rpg.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://www.noelshack.com/old/up/image_15-f552fc1046.png" border="0" alt="" /></a> <a href="http://saigo-chanbara-rpg.forums-rpg.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://img4.hostingpics.net/pics/249231100x35.jpg" border="0" alt="" /></a> <a href="http://reinventeladestinee.forumactif.com/forum." class="postlink" target="_blank" rel="nofollow"> <img src="http://i21.servimg.com/u/f21/13/31/07/48/314qir10.jpg" border="0" alt="" /></a> <a href="http://lycee-arcenciel.forumsactifs.com/forum.htm" class="postlink" target="_blank" rel="nofollow"> <img src="http://illiweb.com/fa/pbucket.gif" border="0" alt="" /></a> <a href="http://karnevale-avenue.forumactif.org/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i21.servimg.com/u/f21/13/31/07/48/11842710.jpg" border="0" alt="" /></a> <a href="http://pokemon-tsuki.forumsactifs.com" class="postlink" target="_blank" rel="nofollow"> <img src="http://img11.hostingpics.net/pics/219181lyezb222.png" border="0" alt="" /></a> <a href="http://nakunaru-academy.chocoforum.net/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i23.servimg.com/u/f23/15/23/14/47/aaaaa_11.jpg" border="0" alt="" /></a> <a href="http://i-d-s.creerforum.net" class="postlink" target="_blank" rel="nofollow"> <img src="http://i56.tinypic.com/j5l9ad.png" border="0" alt="" /></a> <a href="http://redgarden.forumactif.com/forum.htm" class="postlink" target="_blank" rel="nofollow"> <img src="http://img854.imageshack.us/img854/9097/basebouton.png" border="0" alt="" /></a> <a href="http://www.rpgnana.org/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i77.servimg.com/u/f77/15/37/95/51/10035-11.jpg" border="0" alt="" /></a> <a href="http://crazy-tale.forumactif.org/forum" class="postlink" target="_blank" rel="nofollow"> <img src="http://img4.hostingpics.net/pics/408891Sanstitre14.png" border="0" alt="" /></a> <a href="http://omerta.forum-canada.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://img4.hostingpics.net/pics/36161610035.png" border="0" alt="" /></a> <a href="http://after-tea.bbfr.net/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i28.servimg.com/u/f28/14/08/01/62/100x3510.png" border="0" alt="" /></a> <a href="http://pandora-no-kokoro.superforum.fr/forum.htm" class="postlink" target="_blank" rel="nofollow"> <img src="http://i22.servimg.com/u/f22/15/82/36/63/bouton12.jpg" border="0" alt="" /></a> <a href="http://floral-fascination.forumsactifs.com/" class="postlink" target="_blank" rel="nofollow"> <img src="http://i55.tinypic.com/98siky.png" border="0" alt="" /></a> <a href="http://ile-joyaux.forumactif.org"> <img src="http://i21.servimg.com/u/f21/12/51/23/66/10011.jpg" border="0" alt="" /></a> </div> </td> </tr> </table> </td> </tr> <tr> <td colspan="2" class="descgroupes"> <DIV id=mes_contenus> <DIV id=co_1 class=mon_contenu> description groupe 1 </DIV> <DIV style="DISPLAY: none" id=co_2 class=mon_contenu> description groupe 2 </DIV> <DIV style="DISPLAY: none" id=co_3 class=mon_contenu> description groupe 3 </DIV> <DIV style="DISPLAY: none" id=co_4 class=mon_contenu> description groupe 4 </DIV> <DIV style="DISPLAY: none" id=co_5 class=mon_contenu> description groupe 5 </DIV> <DIV style="DISPLAY: none" id=co_6 class=mon_contenu> description groupe 6 </DIV> <DIV style="DISPLAY: none" id=co_7 class=mon_contenu> description groupe 7 </DIV> <DIV style="DISPLAY: none" id=co_8 class=mon_contenu> description groupe 8 </DIV> <DIV style="DISPLAY: none" id=co_9 class=mon_contenu> description groupe 9 </DIV> </div></div> </td> </tr> <tr> <td colspan="2" class="menleg"> The Other Side est la propriété <u> totale </u>de ses fondateurs & administrateurs, <strong>toute copie</strong> partielle <br > ou totale sera sanctionnée. Merci de respecter notre travail.</font> </div> </td> </tr> </table></center>