cadre dans la présentation [RESOLU]

[Sanzo Toda]

Bonsoir, j'ai un forum et j'aimerai ajouter quelque chose sur le message dans la page d'accueil, j'ai longuement cherché, et j'ai trouver sur un forum ceci:

Spoiler:

j'aimerai recrée ce qui est dans le cadre rouge sachant que quand on passe la souris sur une des icônes dans le cadre bleu, l'intérieur du cadre noir change. Merci d'avance.

Pour information, voici un le forum ou il y a ce que je demande : ICI

[Invité]

Bonsoir,

C'est un système de tableau à onglets. Il y a de nombreux sujets sur le forum qui abordent ce sujet ( qui semble très à la mode ).

Il faut réaliser un tableau avec 1 colonne et 2 lignes. En haut, on mettra les onglets, en bas le contenu voulu. Pour donner un peut de style à tout ça, on ajoute un peu de codes CSS. Enfin pour animer les onglets, on se sert d'un code javascript.

Donc pour obtenir ceci:


Le code du message d'accueil:

Code:

<script>LE JAVASCRIPT </script><table><tr><td class="liste_onglets"><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></td></tr>
<tr><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></div></td></tr></table>

> 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.

Le code CSS:

Code:

.liste_onglets{
margin-bottom: 5px;
padding: 4px;}

.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  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%;}

Le code CSS est à personnaliser selon vos souhaits.

Le code javascript:

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';
            }
        }
    }   
}

---

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>

Cordialement.

[Sanzo Toda]

Merci beaucoup c'est pile poil ce que je cherchais! Merci beaucoup!


Topic résolu !