Code pour page d'accueil

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

Résolu Code pour page d'accueil

Message par Chô le Mer 22 Sep 2010 - 13:40

Bonjour,

Je recherche à avoir un code de base (que je personnaliserai moi-même plus tard) pour ma page d'accueil. Je voudrais donc avoir 4 onglets de bases qui affichent 4 choses différentes en passant la sourie dessus comme sur ce forum http://hiroky.forumactif.us/

Voila merci d'avance.


Dernière édition par Chô le Sam 25 Sep 2010 - 16:49, édité 1 fois

Chô
*

Féminin
Messages : 46
Inscrit(e) le : 06/06/2010

http://studio-ghibli.forumactif.fr/
Chô a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour page d'accueil

Message par Invité le Mer 22 Sep 2010 - 13:44

Bonjour,

Décidemment ce genre de tableau est à la mode Smile . Voici un sujet où l'on en parle : Faire des onglets en page d'acceuil .

Edit: A la reflexion, c'est un peu le bazar dans le sujet donné ci-dessus ...

Il faut 3 codes pour obtenir les onglets
Le fichier à enregistrer en .js puis à heberger:
Code:
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';
            }
        }
    }           
}

La feuille de style CSS:
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  cursor: pointer;
  margin-bottom: -1px;

.mon_onglet:hover{
  background: #b8efa1;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000; 
  border-bottom: 1px solid #ffffff; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Le message d'acceuil:
Code:
<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <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></ul>

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

Cordialement.

Invité
Invité


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

Résolu Re: Code pour page d'accueil

Message par Invité le Jeu 23 Sep 2010 - 20:56

Bonsoir,
pourrais-je savoir ou l'on met le premier code, merci!

Invité
Invité


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

Résolu Re: Code pour page d'accueil

Message par Invité le Jeu 23 Sep 2010 - 21:27

Bonsoir,

Le premier code est à enregistrer dans le bloc note, puis à héberger, pour obtenir un adresse comme celle-ci:
Code:
http://pmsc.free.fr/J04/10912150254.js
Cette adresse est a inséré dans la page d'accueil, c'est la première ligne.
Code:
<script src="ADRESSE_DU_FICHIER.js"></script>

Cordialement.

Invité
Invité


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

Résolu Re: Code pour page d'accueil

Message par Invité le Ven 24 Sep 2010 - 11:08

Bonjour, merci de ta réponse!

Invité
Invité


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

Résolu Re: Code pour page d'accueil

Message par Chô le Sam 25 Sep 2010 - 16:49

Merci beaucoup j'arrive a faire ce que je veux grâce à toi ^_^ !

Chô
*

Féminin
Messages : 46
Inscrit(e) le : 06/06/2010

http://studio-ghibli.forumactif.fr/
Chô 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