Changer l'apparence des Onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changer l'apparence des Onglets

Message par Mikltov le Dim 25 Juil 2010 - 14:04

Bonjour ou bonsoir lorsque vous lirez ce message.

Depuis quelques temps, j'essaye de changer le design d'un forum dont j'ai la charge (http://univers-bhaldi.forumactif.us/forum.htm)
Bien que mon design soit quasiment terminé, j'ai quelques soucis concernant la fonction onglet.

Bref, je voudrai changer cette apparence actuelle () en celle-ci :
PS : Le cadre de fond, pas l'écriture Smile

D'après mes "faibles" connaissances en programmation en règle générale (mais ça s'améliore ^^), je vous donne une partie du code, qui, normalement, doit se trouver cette (ou ces) lignes supplémentaires.

Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Onglet</title>
  <script type="text/javascript">
  function onglet(value)
  {
      var actual=document.getElementById(value).style.display;
     
     
      if (actual=='block')
      {
      document.getElementById(value).style.display='block';
      }
      else if (actual=='none')   
      {
       
        document.getElementById(value).style.display='block';
       
        if (value=='onglet1')
            {
            document.getElementById('onglet2').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else if (value=='onglet2')
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet2').style.display='none';
            }
      }
  }
  </script>
  <style type="text/css">
  .tab
  {
  cursor:pointer;
  display:inline;
  width:160px;
  height:30px;
  }
 
  .tab td
  {
  background-color:#59360B;
  color:#EDE7C2;
  }
  </style>
 </head>

J'aurai aussi une autre question concernant cette autre portion du code, mais pour l'instant, je préfère m'en tenir à là.


Merci d'avance.


Dernière édition par Mikltov le Jeu 29 Juil 2010 - 21:00, édité 1 fois

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Mikltov le Lun 26 Juil 2010 - 14:07

24 Heures viennent de passer et je n'ai toujours pas résolu ce problème. Je me permets donc de Upper.

Si le code était incomplet, le voilà en entier :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Onglet</title>
  <script type="text/javascript">
  function onglet(value)
  {
      var actual=document.getElementById(value).style.display;
     
     
      if (actual=='block')
      {
      document.getElementById(value).style.display='block';
      }
      else if (actual=='none')   
      {
       
        document.getElementById(value).style.display='block';
       
        if (value=='onglet1')
            {
            document.getElementById('onglet2').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else if (value=='onglet2')
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet2').style.display='none';
            }
      }
  }
  </script>
  <style type="text/css">
  .tab
  {
  cursor:pointer;
  display:inline;
  width:160px;
  height:30px;
  }
 
  .tab td
  {
  background-color:#59360B;
  color:#EDE7C2;
  }
  </style>
 </head>
 <body>
  <div>
      <table onmouseover="onglet('onglet1');" class="tab">
            <tr><td>
                  <b>Toi, Cher Visiteur</b><br><br>
            </td></tr>
      </table>
    <table onmouseover="onglet('onglet2');" class="tab">
            <tr><td>
                  <b>Toi, Cher Joueur</b><br><br>
            </td></tr>
      </table>
      <table onmouseover="onglet('onglet3');" class="tab">
            <tr><td>
                  <b>Toi, Cher Partenaire</b><br><br>
            </td></tr>
      </table>
  </div>
 
  <div id="onglet1" style="display:none;">
 <TABLE width="100%" background=http://img13.imageshack.us/img13/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<br>
<DIV align=right><FONT size=2>Si tu connais l'univers de <EM>Harry Potter</EM>...</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;Ne t'es-tu pas, parfois, demandé</FONT></DIV>
<DIV align=right><FONT size=2>ce qui se passait&nbsp;derrière l'histoire officielle ?</FONT></DIV>
<DIV align=right><FONT size=2></FONT>&nbsp;</DIV>
<DIV align=right><FONT size=2>N'as tu pas souvent <EM>imaginé</EM></FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;comment ça pouvait se passer si...</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;certains <EM>personnages</EM>...</FONT></DIV>
<DIV align=right><FONT size=2>avaient fait des choix différents ?</FONT></DIV>
<DIV align=right><FONT size=2></FONT>&nbsp;</DIV>
<DIV align=right><FONT size=2>Et si tu avais la <EM>capacité</EM> de tout <EM>réécrire</EM> ?</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;De créer de <EM>nouveaux évènements</EM> ?</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;Et une <EM>nouvelle histoire</EM>... ?</FONT></DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right><FONT color=white size=4>Que ferais-tu ?</FONT></DIV>
<DIV align=right><FONT color=white size=4>Quel choix ferais-tu ?</FONT></DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right><FONT color=yellow><STRONG>Alors, rejoins-nous.</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>Incarne un personnage de ton imagination...</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>Ou un des personnages de la saga de J.K Rowling.</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>&nbsp;Et participe à ce forum RP convivial,</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>&nbsp;Garanti 100% littéraire, avec une communauté sympathique.</STRONG></FONT></DIV>
<DIV align=right><FONT color=orange size=5>Où jamais rien ne sera plus comme avant.</FONT></DIV><P>&nbsp;</P></TD></TR>
<DIV></DIV></TBODY></TABLE>
  </div>
  <div id="onglet2" style="display:none;">
  <TABLE width="100%" background=http://img713.imageshack.us/img713/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<DIV align=right>
<TABLE border=0 cellSpacing=1 cellPadding=1 width="70%" align=right>
<TBODY>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img97.imageshack.us/img97/888/datedujeu.png"></DIV>
<DIV align=center><STRONG><FONT size=4><U>MARS 1992</U></FONT></STRONG></DIV></TD>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img535.imageshack.us/img535/1722/sypnosis.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=left>1981, Le Seigneur des Ténèbres disparaît en assassinant les Potters. Seul survit de l'attaque Harry Potter, âgé d'un an.</DIV>
<DIV>Dix ans plus tard, le voici à l'Ecole de Sorcellerie Poudlard.</DIV>
<DIV>Mais, derrière ses aventures... Que se passe t-il ?</DIV>
<DIV>&nbsp;</DIV>
<DIV>Venez écrire l'Histoire des Ombres, celle qui ne sera jamais contée.</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img409.imageshack.us/img409/6169/scnario.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=center>Des élèves de diverses horizons doivent se connaître et apprendre à vivre ensemble, sous les Quatre Maisons.</DIV>
<DIV align=center>Mais un danger insoupçonné, vivant à l'intérieur d'eux, pourrait leur couter très cher.</DIV>
<DIV align=center>Deux élèves de Serpentard ont cédé à ce péché qu'on appelle...</DIV>
<DIV align=center>TENTATION.</DIV>
<DIV align=center><EM><FONT size=4>En ferez vous parti ?</FONT></EM></DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img707.imageshack.us/img707/2594/derniresnouvelles.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=right>Deux élèves de Serpentard, <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/matthew-hawkins-admis-t402.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Matthew Hawkins</A> et <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/rutsuku-fushin-eleve-delinquant-xdadmis-t327.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Rutsuku Fushin</A> ont décidé de reporter leur plan pour récupérer la Pierre Philosophale.</DIV>
<DIV>&nbsp;</DIV>
<DIV align=center><EM>Serez vous avec ou contre eux ?</EM></DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV></TD></TR>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img228.imageshack.us/img228/952/evnements.png"></DIV>
<DIV align=center>Le Carnaval a été annoncé ! Venez y participer, que ce soit au <A class=postlink href="http://univers-bhaldi.forumactif.us/evenements-speciaux-f55/fete-du-carnaval-bal-d-ouverture-t686.htm#8943?sid=a5f038a9f9c018b35fb7bd18c3480936">bal</A> que pendant les cours.</DIV>
<DIV>&nbsp;</DIV>
<DIV>Le bal d'Ouverture dure jusqu'au 31 Août !</DIV><DIV>&nbsp;</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img201.imageshack.us/img201/1549/topposteurs.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=right>1er - <A class=postlink href="http://univers-bhaldi.forumactif.us/professeurs-et-personnels-valides-f92/albus-dumbledore-admis-au-college-t309.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Albus Dumbledore</A></DIV>
<DIV>2eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/fyos-firoanime-terminee-t331.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Fyos Firoanime</A></DIV>
<DIV>3eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/rutsuku-fushin-eleve-delinquant-xdadmis-t327.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Rutsuku Fushin</A></DIV>
<DIV>4eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/zipporah-blackwood-admise-au-college-t317.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Zipporah Blackwood</A></DIV>
<DIV>&nbsp;</DIV><DIV>&nbsp;</DIV></TD></TR></TBODY></TABLE></DIV></TBODY></TABLE>
  </div>
  <div id="onglet3" style="display:none;">
  <TABLE width="100%" background=http://img713.imageshack.us/img713/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<DIV align=right><FONT color=white><STRONG><U><EM>Toi, Partenaire…</EM></U></STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG><U><EM>Cette section est en train de se créer. Merci de votre compréhension</EM></U></STRONG></FONT></DIV>
</TBODY></TABLE>
  </div>
</body>
</html>

Merci d'avance à ceux qui voudront bien m'aider sur ce problème.

Cordialement.

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Mikltov le Mar 27 Juil 2010 - 20:26

Encore une fois, je me dois de déclarer un Up à ce sujet.

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Invité le Mar 27 Juil 2010 - 20:30

Bonsoir, si j'ai bien comprit, vous voulez changer votre image: en
???

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Mikltov le Mar 27 Juil 2010 - 23:38

C'est exactement ça.

En fait, pour être plus précise, le cadre de fond est créé par un fonction bien précise, mais je ne sais pas sur quelle ligne.
Et je voudrais changer le cadre par l'image.

Simplement me dire la ligne de code pour enlever le cadre et la fonction à appeler pour l'image en fond me contenteront. Le reste, je pense pouvoir me débrouiller.

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Invité le Mar 27 Juil 2010 - 23:59

D'accord alors je vais vous demander la totalité du code qui est dans la feuille de style et la totalité du code qui est dans généralités ^^

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Mikltov le Mer 28 Juil 2010 - 8:30

J'avais déjà donné le code régissant tout le système plus haut, mais si vous le voulez davantage :

Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Onglet</title>
  <script type="text/javascript">
  function onglet(value)
  {
      var actual=document.getElementById(value).style.display;
     
     
      if (actual=='block')
      {
      document.getElementById(value).style.display='block';
      }
      else if (actual=='none')   
      {
       
        document.getElementById(value).style.display='block';
       
        if (value=='onglet1')
            {
            document.getElementById('onglet2').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else if (value=='onglet2')
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet2').style.display='none';
            }
      }
  }
  </script>
  <style type="text/css">
  .tab
  {
  cursor:pointer;
  display:inline;
  width:160px;
  height:30px;
  }
 
  .tab td
  {
  background-color:#59360B;
  color:#EDE7C2;
  }
  </style>
 </head>

 <body>
  <div>
      <table onmouseover="onglet('onglet1');" class="tab">
            <tr><td>
                  <b>Toi, Cher Visiteur</b><br><br>
            </td></tr>
      </table>
    <table onmouseover="onglet('onglet2');" class="tab">
            <tr><td>
                  <b>Toi, Cher Joueur</b><br><br>
            </td></tr>
      </table>
      <table onmouseover="onglet('onglet3');" class="tab">
            <tr><td>
                  <b>Toi, Cher Partenaire</b><br><br>
            </td></tr>
      </table>
  </div>
 
  <div id="onglet1" style="display:none;">
 <TABLE width="100%" background=http://img13.imageshack.us/img13/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<br>
<DIV align=right><FONT size=2>Si tu connais l'univers de <EM>Harry Potter</EM>...</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;Ne t'es-tu pas, parfois, demandé</FONT></DIV>
<DIV align=right><FONT size=2>ce qui se passait&nbsp;derrière l'histoire officielle ?</FONT></DIV>
<DIV align=right><FONT size=2></FONT>&nbsp;</DIV>
<DIV align=right><FONT size=2>N'as tu pas souvent <EM>imaginé</EM></FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;comment ça pouvait se passer si...</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;certains <EM>personnages</EM>...</FONT></DIV>
<DIV align=right><FONT size=2>avaient fait des choix différents ?</FONT></DIV>
<DIV align=right><FONT size=2></FONT>&nbsp;</DIV>
<DIV align=right><FONT size=2>Et si tu avais la <EM>capacité</EM> de tout <EM>réécrire</EM> ?</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;De créer de <EM>nouveaux évènements</EM> ?</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;Et une <EM>nouvelle histoire</EM>... ?</FONT></DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right><FONT color=white size=4>Que ferais-tu ?</FONT></DIV>
<DIV align=right><FONT color=white size=4>Quel choix ferais-tu ?</FONT></DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right><FONT color=yellow><STRONG>Alors, rejoins-nous.</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>Incarne un personnage de ton imagination...</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>Ou un des personnages de la saga de J.K Rowling.</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>&nbsp;Et participe à ce forum RP convivial,</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>&nbsp;Garanti 100% littéraire, avec une communauté sympathique.</STRONG></FONT></DIV>
<DIV align=right><FONT color=orange size=5>Où jamais rien ne sera plus comme avant.</FONT></DIV><P>&nbsp;</P></TD></TR>
<DIV></DIV></TBODY></TABLE>
  </div>
  <div id="onglet2" style="display:none;">
  <TABLE width="100%" background=http://img713.imageshack.us/img713/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<DIV align=right>
<TABLE border=0 cellSpacing=1 cellPadding=1 width="70%" align=right>
<TBODY>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img97.imageshack.us/img97/888/datedujeu.png"></DIV>
<DIV align=center><STRONG><FONT size=4><U>MARS 1992</U></FONT></STRONG></DIV></TD>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img535.imageshack.us/img535/1722/sypnosis.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=left>1981, Le Seigneur des Ténèbres disparaît en assassinant les Potters. Seul survit de l'attaque Harry Potter, âgé d'un an.</DIV>
<DIV align=left>Dix ans plus tard, le voici à l'Ecole de Sorcellerie Poudlard.</DIV>
<DIV align=left>Mais, derrière ses aventures... Que se passe t-il ?</DIV>
<DIV>&nbsp;</DIV>
<DIV align=left>Venez écrire l'Histoire des Ombres, celle qui ne sera jamais contée.</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img409.imageshack.us/img409/6169/scnario.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=center>Des élèves de diverses horizons doivent se connaître et apprendre à vivre ensemble, sous les Quatre Maisons.</DIV>
<DIV align=center>Mais un danger insoupçonné, vivant à l'intérieur d'eux, pourrait leur couter très cher.</DIV>
<DIV align=center>Deux élèves de Serpentard ont cédé à ce péché qu'on appelle...</DIV>
<DIV align=center>TENTATION.</DIV>
<DIV align=center><EM><FONT size=4>En ferez vous parti ?</FONT></EM></DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img707.imageshack.us/img707/2594/derniresnouvelles.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=right>Deux élèves de Serpentard, <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/matthew-hawkins-admis-t402.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Matthew Hawkins</A> et <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/rutsuku-fushin-eleve-delinquant-xdadmis-t327.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Rutsuku Fushin</A> ont décidé de reporter leur plan pour récupérer la Pierre Philosophale.</DIV>
<DIV>&nbsp;</DIV>
<DIV align=center><EM>Serez vous avec ou contre eux ?</EM></DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV></TD></TR>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img228.imageshack.us/img228/952/evnements.png"></DIV>
<DIV align=center>Le Carnaval a été annoncé ! Venez y participer, que ce soit au <A class=postlink href="http://univers-bhaldi.forumactif.us/evenements-speciaux-f55/fete-du-carnaval-bal-d-ouverture-t686.htm#8943?sid=a5f038a9f9c018b35fb7bd18c3480936">bal</A> que pendant les cours.</DIV>
<DIV>&nbsp;</DIV>
<DIV align=center>Le bal d'Ouverture dure jusqu'au 31 Août !</DIV><DIV>&nbsp;</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img201.imageshack.us/img201/1549/topposteurs.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=right>1er - <A class=postlink href="http://univers-bhaldi.forumactif.us/professeurs-et-personnels-valides-f92/albus-dumbledore-admis-au-college-t309.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Albus Dumbledore</A></DIV>
<DIV>2eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/fyos-firoanime-terminee-t331.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Fyos Firoanime</A></DIV>
<DIV>3eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/rutsuku-fushin-eleve-delinquant-xdadmis-t327.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Rutsuku Fushin</A></DIV>
<DIV>4eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/zipporah-blackwood-admise-au-college-t317.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Zipporah Blackwood</A></DIV>
<DIV>&nbsp;</DIV><DIV>&nbsp;</DIV></TD></TR></TBODY></TABLE></DIV></TBODY></TABLE>
  </div>
  <div id="onglet3" style="display:none;">
  <TABLE width="100%" background=http://img713.imageshack.us/img713/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<DIV align=right><FONT color=yellow><STRONG><U><EM>Cette section est en cours d‘amélioration. Merci de votre compréhension</EM></U></STRONG></FONT></DIV>
<P>
<TABLE border=0 cellSpacing=1 cellPadding=1 width="60%" align=right>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img507.imageshack.us/img507/4794/demande.png"></DIV>
<P>Pour la demande de partenariat, demandez à un <A class=postlink href="http://univers-bhaldi.forumactif.us/groupcp.forum?g=1?sid=554d8fb9494b7714a78f52d10fadcaba">Administrateur</A>.</P>
<P>Il se chargera de transférer votre demande.</P></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img175.imageshack.us/img175/3991/nosboutons.png"></DIV>
<DIV align=left>Voici nos boutons, que vous pourrez mettre sur votre site.</DIV>
<DIV align=left>&nbsp;</DIV>
<DIV align=left>&nbsp;</DIV>
<DIV align=left>&nbsp;</DIV>
<DIV align=left>&nbsp;</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img529.imageshack.us/img529/7913/rfrencsur.png"></DIV>
<P>Voici les lieux où Univers Bhaldi est référencé.</P>
<P>&nbsp;</P>
<P>&nbsp;</P></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img44.imageshack.us/img44/9548/privilgis.png"></DIV>
<DIV align=right>Voici nos partenaires privilégiés, dont nous vous conseillons de visiter leurs sites.</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV></TD></TR>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img822.imageshack.us/img822/6564/topsites.png"></DIV>
<DIV align=center>Votez pour nous !</DIV>
<DIV align=center>&nbsp;</DIV>
<P>&nbsp;</P></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img541.imageshack.us/img541/3358/partenairesr.png"></DIV>
<DIV align=right>Voici les liens vers nos partenaires. Bien évidemment, jetez un coup d'oeil.</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right></DIV></TD></TR></TBODY></TABLE>
<DIV></DIV>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P></TBODY></TABLE>
  </div>
</body>
</html>

Bien que j'ai d'autres codes CSS régissant pour d'autres fonctions pour mon forum, je sais parfaitement que, sur ce point, c'est le script de base qu'il faut modifier (celui que je donne).

Merci d'avance

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Invité le Mer 28 Juil 2010 - 15:06

Ha d'accord, merci, voilà ce que j'ai fais:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Onglet</title>
  <script type="text/javascript">
  function onglet(value)
  {
      var actual=document.getElementById(value).style.display;
     
     
      if (actual=='block')
      {
      document.getElementById(value).style.display='block';
      }
      else if (actual=='none')   
      {
       
        document.getElementById(value).style.display='block';
       
        if (value=='onglet1')
            {
            document.getElementById('onglet2').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else if (value=='onglet2')
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet2').style.display='none';
            }
      }
  }
  </script>
  <style type="text/css">
  .tab
  {
  cursor:pointer;
  display:inline;
  width:160px;
  height:30px;
  }
 
  .tab td
  {
  background-color:#59360B;
  color:#EDE7C2;
  }
  </style>
 </head>

 <body>
  <div>
      <table onmouseover="onglet('onglet1');" class="tab">
            <tr><td>
                  <b><img src="http://img843.imageshack.us/img843/4958/grossefonction.png" /> </b><br><br>
            </td></tr>
      </table>
    <table onmouseover="onglet('onglet2');" class="tab">
            <tr><td>
                  <b>Toi, Cher Joueur</b><br><br>
            </td></tr>
      </table>
      <table onmouseover="onglet('onglet3');" class="tab">
            <tr><td>
                  <b>Toi, Cher Partenaire</b><br><br>
            </td></tr>
      </table>
  </div>
 
  <div id="onglet1" style="display:none;">
 <TABLE width="100%" background=http://img13.imageshack.us/img13/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<br>
<DIV align=right><FONT size=2>Si tu connais l'univers de <EM>Harry Potter</EM>...</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;Ne t'es-tu pas, parfois, demandé</FONT></DIV>
<DIV align=right><FONT size=2>ce qui se passait&nbsp;derrière l'histoire officielle ?</FONT></DIV>
<DIV align=right><FONT size=2></FONT>&nbsp;</DIV>
<DIV align=right><FONT size=2>N'as tu pas souvent <EM>imaginé</EM></FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;comment ça pouvait se passer si...</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;certains <EM>personnages</EM>...</FONT></DIV>
<DIV align=right><FONT size=2>avaient fait des choix différents ?</FONT></DIV>
<DIV align=right><FONT size=2></FONT>&nbsp;</DIV>
<DIV align=right><FONT size=2>Et si tu avais la <EM>capacité</EM> de tout <EM>réécrire</EM> ?</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;De créer de <EM>nouveaux évènements</EM> ?</FONT></DIV>
<DIV align=right><FONT size=2>&nbsp;Et une <EM>nouvelle histoire</EM>... ?</FONT></DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right><FONT color=white size=4>Que ferais-tu ?</FONT></DIV>
<DIV align=right><FONT color=white size=4>Quel choix ferais-tu ?</FONT></DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right><FONT color=yellow><STRONG>Alors, rejoins-nous.</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>Incarne un personnage de ton imagination...</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>Ou un des personnages de la saga de J.K Rowling.</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>&nbsp;Et participe à ce forum RP convivial,</STRONG></FONT></DIV>
<DIV align=right><FONT color=yellow><STRONG>&nbsp;Garanti 100% littéraire, avec une communauté sympathique.</STRONG></FONT></DIV>
<DIV align=right><FONT color=orange size=5>Où jamais rien ne sera plus comme avant.</FONT></DIV><P>&nbsp;</P></TD></TR>
<DIV></DIV></TBODY></TABLE>
  </div>
  <div id="onglet2" style="display:none;">
  <TABLE width="100%" background=http://img713.imageshack.us/img713/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<DIV align=right>
<TABLE border=0 cellSpacing=1 cellPadding=1 width="70%" align=right>
<TBODY>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img97.imageshack.us/img97/888/datedujeu.png"></DIV>
<DIV align=center><STRONG><FONT size=4><U>MARS 1992</U></FONT></STRONG></DIV></TD>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img535.imageshack.us/img535/1722/sypnosis.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=left>1981, Le Seigneur des Ténèbres disparaît en assassinant les Potters. Seul survit de l'attaque Harry Potter, âgé d'un an.</DIV>
<DIV align=left>Dix ans plus tard, le voici à l'Ecole de Sorcellerie Poudlard.</DIV>
<DIV align=left>Mais, derrière ses aventures... Que se passe t-il ?</DIV>
<DIV>&nbsp;</DIV>
<DIV align=left>Venez écrire l'Histoire des Ombres, celle qui ne sera jamais contée.</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img409.imageshack.us/img409/6169/scnario.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=center>Des élèves de diverses horizons doivent se connaître et apprendre à vivre ensemble, sous les Quatre Maisons.</DIV>
<DIV align=center>Mais un danger insoupçonné, vivant à l'intérieur d'eux, pourrait leur couter très cher.</DIV>
<DIV align=center>Deux élèves de Serpentard ont cédé à ce péché qu'on appelle...</DIV>
<DIV align=center>TENTATION.</DIV>
<DIV align=center><EM><FONT size=4>En ferez vous parti ?</FONT></EM></DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img707.imageshack.us/img707/2594/derniresnouvelles.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=right>Deux élèves de Serpentard, <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/matthew-hawkins-admis-t402.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Matthew Hawkins</A> et <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/rutsuku-fushin-eleve-delinquant-xdadmis-t327.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Rutsuku Fushin</A> ont décidé de reporter leur plan pour récupérer la Pierre Philosophale.</DIV>
<DIV>&nbsp;</DIV>
<DIV align=center><EM>Serez vous avec ou contre eux ?</EM></DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV></TD></TR>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img228.imageshack.us/img228/952/evnements.png"></DIV>
<DIV align=center>Le Carnaval a été annoncé ! Venez y participer, que ce soit au <A class=postlink href="http://univers-bhaldi.forumactif.us/evenements-speciaux-f55/fete-du-carnaval-bal-d-ouverture-t686.htm#8943?sid=a5f038a9f9c018b35fb7bd18c3480936">bal</A> que pendant les cours.</DIV>
<DIV>&nbsp;</DIV>
<DIV align=center>Le bal d'Ouverture dure jusqu'au 31 Août !</DIV><DIV>&nbsp;</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img201.imageshack.us/img201/1549/topposteurs.png"></DIV>
<DIV>&nbsp;</DIV>
<DIV align=right>1er - <A class=postlink href="http://univers-bhaldi.forumactif.us/professeurs-et-personnels-valides-f92/albus-dumbledore-admis-au-college-t309.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Albus Dumbledore</A></DIV>
<DIV>2eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/fyos-firoanime-terminee-t331.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Fyos Firoanime</A></DIV>
<DIV>3eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/rutsuku-fushin-eleve-delinquant-xdadmis-t327.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Rutsuku Fushin</A></DIV>
<DIV>4eme - <A class=postlink href="http://univers-bhaldi.forumactif.us/serpentard-valides-f91/zipporah-blackwood-admise-au-college-t317.htm?sid=a5f038a9f9c018b35fb7bd18c3480936">Zipporah Blackwood</A></DIV>
<DIV>&nbsp;</DIV><DIV>&nbsp;</DIV></TD></TR></TBODY></TABLE></DIV></TBODY></TABLE>
  </div>
  <div id="onglet3" style="display:none;">
  <TABLE width="100%" background=http://img713.imageshack.us/img713/9100/fondpourprsentation1.png height="100%">
<TBODY>
<TR>
<TD>
<DIV align=right><FONT color=yellow><STRONG><U><EM>Cette section est en cours d‘amélioration. Merci de votre compréhension</EM></U></STRONG></FONT></DIV>
<P>
<TABLE border=0 cellSpacing=1 cellPadding=1 width="60%" align=right>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img507.imageshack.us/img507/4794/demande.png"></DIV>
<P>Pour la demande de partenariat, demandez à un <A class=postlink href="http://univers-bhaldi.forumactif.us/groupcp.forum?g=1?sid=554d8fb9494b7714a78f52d10fadcaba">Administrateur</A>.</P>
<P>Il se chargera de transférer votre demande.</P></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img175.imageshack.us/img175/3991/nosboutons.png"></DIV>
<DIV align=left>Voici nos boutons, que vous pourrez mettre sur votre site.</DIV>
<DIV align=left>&nbsp;</DIV>
<DIV align=left>&nbsp;</DIV>
<DIV align=left>&nbsp;</DIV>
<DIV align=left>&nbsp;</DIV></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img529.imageshack.us/img529/7913/rfrencsur.png"></DIV>
<P>Voici les lieux où Univers Bhaldi est référencé.</P>
<P>&nbsp;</P>
<P>&nbsp;</P></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img44.imageshack.us/img44/9548/privilgis.png"></DIV>
<DIV align=right>Voici nos partenaires privilégiés, dont nous vous conseillons de visiter leurs sites.</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV></TD></TR>
<TR>
<TD></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img822.imageshack.us/img822/6564/topsites.png"></DIV>
<DIV align=center>Votez pour nous !</DIV>
<DIV align=center>&nbsp;</DIV>
<P>&nbsp;</P></TD>
<TD>
<DIV align=center><IMG border=0 alt="" src="http://img541.imageshack.us/img541/3358/partenairesr.png"></DIV>
<DIV align=right>Voici les liens vers nos partenaires. Bien évidemment, jetez un coup d'oeil.</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right>&nbsp;</DIV>
<DIV align=right></DIV></TD></TR></TBODY></TABLE>
<DIV></DIV>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P></TBODY></TABLE>
  </div>
</body>
</html>

Je ne sais pas si c'est cela, mais voila. Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Mikltov le Mer 28 Juil 2010 - 15:15

Je viens de tester, et non, ce n'est pas cela.

Ce n'est pas l'écriture que je désire enlever, mais le cadre qui sert de fond, et le changer en l'image.

Je sais très bien que le cadre est régit par ces lignes ci-dessous :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Onglet</title>
  <script type="text/javascript">
  function onglet(value)
  {
      var actual=document.getElementById(value).style.display;
     
     
      if (actual=='block')
      {
      document.getElementById(value).style.display='block';
      }
      else if (actual=='none')   
      {
       
        document.getElementById(value).style.display='block';
       
        if (value=='onglet1')
            {
            document.getElementById('onglet2').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else if (value=='onglet2')
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet3').style.display='none';
            }
        else
            {
            document.getElementById('onglet1').style.display='none';
            document.getElementById('onglet2').style.display='none';
            }
      }
  }
  </script>
  <style type="text/css">
  .tab
  {
  cursor:pointer;
  display:inline;
  width:200px;
  height:30px;
  }
 
  .tab td
  {
  background-color:#59360B;
  color:#EDE7C2;
  }
  </style>
 </head>
 <body>
  <div>
      <table onmouseover="onglet('onglet1');" class="tab">
            <tr><td>
                  <b>Toi, Cher Visiteur</b><br><br>
            </td></tr>
      </table>
    <table onmouseover="onglet('onglet2');" class="tab">
            <tr><td>
                  <b>Toi, Cher Joueur</b><br><br>
            </td></tr>
      </table>
      <table onmouseover="onglet('onglet3');" class="tab">
            <tr><td>
                  <b>Toi, Cher Partenaire</b><br><br>
            </td></tr>
      </table>
  </div>

Ces lignes régissent non seulement la couleur du fond des onglets, mais aussi leur taille.
La dernière partie sert notamment à définir l'écriture, ce que je ne désire aucunement l'enlever.

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Invité le Mer 28 Juil 2010 - 15:27

J'ai changer l'image que vous vouliez non ?

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Mikltov le Jeu 29 Juil 2010 - 21:00

Ce n'était absolument pas cela que je désirai, mais bon...

Ce n'est pas grave, je vais laisser comme c'est pour l'instant, et je m'en occuperai lorsque j'aurai plus de connaissances en programmation.

Merci encore

Mikltov
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 12/03/2009

http://ex-libris-umbra.forumactif.us/index.htm
Mikltov a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer l'apparence des Onglets

Message par Invité le Jeu 29 Juil 2010 - 23:25

Mais, je voulais bien vous aidez.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum