cadre dans la présentation [RESOLU]

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

Résolu cadre dans la présentation [RESOLU]

Message par Sanzo Toda le Mer 6 Avr 2011 - 21:22

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


Dernière édition par Sanzo Toda le Mer 6 Avr 2011 - 22:26, édité 1 fois

Sanzo Toda
*

Masculin
Messages : 38
Inscrit(e) le : 09/10/2010

http://other-world.fr-bb.com/
Sanzo Toda a été remercié(e) par l'auteur de ce sujet.

Résolu Re: cadre dans la présentation [RESOLU]

Message par Invité le Mer 6 Avr 2011 - 22:15

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

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.

Invité
Invité


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

Résolu Re: cadre dans la présentation [RESOLU]

Message par Sanzo Toda le Mer 6 Avr 2011 - 22:25

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


Topic résolu !

Sanzo Toda
*

Masculin
Messages : 38
Inscrit(e) le : 09/10/2010

http://other-world.fr-bb.com/
Sanzo Toda 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