Installer des onglets de page d'acceuil ...?

[SaphiraSephora]

Bonsoir (:
J'ai un petit problème. Si j'ai trouvé des codes pour installer des onglets, je ne sais en revanche pas du tout du tout du tout comment les installer...serait-il possible de m'expliquer comment ? Je n'ai pas trouvé de tutoriel sur comment faire. Et si je n'ai pas assez cherché, desolé...

Bref. Voilà les trois codes :



Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    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';
            }
        }
    }   
}




Code:

.mon_onglet{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 120px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}




Code:

<table><tr><td>
<div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></div></td>
<td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></td></tr></table>


Merci d'avance. ^^

[Invité]

Bonsoir,

Si voulez les installer en page d'accueil, vous allez dans le PA>affichage>page d'accueil>généralités et vous les insérez dans le message de la page d'accueil.

Cordialement

Edit : suivez les conseils bien plus avisés d'Isolde.

[Invité]

Bonsoir,

Le premier code est la partie javascript, elle permet d'animer les onglets.
Il existe 3 possibilités pour placer le script javascript:

• Enregistrer le script en .js et l'héberger permet de gagner un peu de place. La première ligne de la page d'accueil sera donc
  

  Code:

  <script src="http://le fichier hébérgé.js"></script>

• Enregistrer le script dans une page Html du forum permet aussi de gagner un peu de place. La première ligne de la page d'accueil sera donc
  

  Code:

  <script src="adresse de la page html"></script>

• Si vous ne manquez pas de place, mettre le script directement dans le message d'accueil avant le contenu, entre balise script:
  

  Code:

  <script>LE SCRIPT EN ENTIER</script>

Le second code est la partie CSS.
Le code CSS:
A placer dans Panneau d'admin' > Affichage > couleurs - feuille de style CSS.
Il est à personnaliser entièrement!

Le dernier code est celui du message d'accueil.
Le message d'accueil:
> A placer dans Panneau d'admin' > Affichage > Généralités.
> Remplacez "mon onglet" et "mon contenu" par le nom et le contenu désiré. Faites attention à bien faire correspondre l'onglet et le contenu.
> il est possible de mettre une image à la place du nom de l'onglet:

Code:

<img src="adresse de l'image" />

> On replace "onclick" par "onmouseover" pour que l'onglet change au survol.

Cordialement.

[SaphiraSephora]

Tout ça marche très bien, sauf que ça reste sur le contenu 1. =/

[Invité]

Si les onglets ne changent pas, le soucis vient sûrement du premier code. Quelle solution avez-vous choisi pour la partie javascript?

Cordialement

[SaphiraSephora]

Je l'ai mis dans la page HTML.

[Invité]

Ok,

Donc dans votre message d'accueil, avez-vous mis juste avant le début du tableau:

Code:

<script src="adresse de la page html"></script>

Avec l'adresse de votre page html?

Cordialement.

[SaphiraSephora]

Je peux à présent changer d'onglets, mais les boutons se déplace au-dessus du contenu. ^^'

[Invité]

C'est étrange ça, avez-vous modifié le CSS?

[SaphiraSephora]

Oui... =/

[Invité]

Bonsoir,

Dans ce cas, pourriez-vous me le donner, que je trouve ce qui pose soucis?

Cordialement.

[SaphiraSephora]

Code:

.mon_onglet{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #8F7451;
  border: 3px solid #C2AC8E;
}
.mon_onglet:hover{
  background: #C2AC8E;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #8F7451;
  border: 1px solid #C2AC8E;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #C2AC8E;
  padding: 10px;
  margin: 10 px;
  height: 120px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

[Invité]

Bonjour,

Avec le code de base, la feuille CSS ne pose pas de soucis, donc il ne reste plus qu'une solution : le soucis est dans le contenu du message, il doit manquer une balise à la fin du contenu du premier onglet.
Si vous ne parvenez pas à trouver, n'hésitez pas à me confier le contenu du message d'accueil.

Cordialement.

[SaphiraSephora]

Ha ... donc, je penses que vous vous attendez, mais je n'ai pas réussi à trouver le problème.

Code:

<script src="http://eternal-dream-rpg.forumactif.com/h1-tableau"></script>

<table><tr><td><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></div></td>
<td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Bienvenue ! <br /> Sur ce forum de RPG que vous adorez, bien sûr, vous incarnerez un personnage du "Nouveau Monde", car oui, bien sûr, notre planéte Terre a finit par se dérégler. Tout ça avec le sourire sauf quand on passe en mode émotion (quoi que !) Enfin bref. Si tu es un petit nouveau, file lire le réglement et le contexte, sinon, eh bien, fait ce que tu veux. Reste poli, quand même, hein, faut pas péter les plombs non plus. BREF, amuseez-vous bien <3  <br /> <br /><center>
<select name="wxlmenu" size=1 style="font-family: arial; color: white; border: double #FBFBFB;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8F7451;"><div style="border: double #FBFBFB;"><option>Partenaire</option>
<option>A venir</option>
<option>A venir</option>
<option>A venir</option></select></center></td></table></div></div></blockquote>
</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Youplahop</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></td></tr></table>

[Invité]

Le tableau contenu le menu déroulant n'était pas ouvert . Essayez comme ceci:

Code:

<script src="http://eternal-dream-rpg.forumactif.com/h1-tableau"></script>

<table><tr><td><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></div></td>
<td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Bienvenue ! <br /> Sur ce forum de RPG que vous adorez, bien sûr, vous incarnerez un personnage du "Nouveau Monde", car oui, bien sûr, notre planéte Terre a finit par se dérégler. Tout ça avec le sourire sauf quand on passe en mode émotion (quoi que !) Enfin bref. Si tu es un petit nouveau, file lire le réglement et le contexte, sinon, eh bien, fait ce que tu veux. Reste poli, quand même, hein, faut pas péter les plombs non plus. BREF, amuseez-vous bien <3  <br /> <br /><center><table><tr><td><center>
<select name="wxlmenu" size=1 style="font-family: arial; color: white; border: double #FBFBFB;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8F7451;"><div style="border: double #FBFBFB;"><option>Partenaire</option>
<option>A venir</option>
<option>A venir</option>
<option>A venir</option></select></center></td></tr></table></center></div></div>

    <div id="co_2" class="mon_contenu" style="display: none;">Youplahop</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></td></tr></table>

Cordialement.

[SaphiraSephora]

Haaaaaan, merci, merci de tout coeur, ça MARCHE. **

Encore merci pour vootre précieuse aide. Mon problème est maintenant résolue. ^^