Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

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

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!
avatar

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

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!
avatar

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 ^_^ !
avatar

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