Changer d'image lorsque l'onglet est actif ou non.

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

Résolu Changer d'image lorsque l'onglet est actif ou non.

Message par Asaki le Sam 31 Mai 2014 - 9:48

Bonjour !

Je viens à vous avec un petit souci de codage. En effet je dispose d'une page d'accueil avec des onglets (les deux points gris et blanc) que l'on trouve sur mon forum :
http://naoko.forumactif.org/

J'ai cherché un peu partout mais je n'ai pas trouvé comment faire pour changer l'image (le petit rond) de l'onglet actif.
En somme, j'aimerais que quand l'onglet est actif, celui-ci soit clair et que quand il est inactif il soit foncé, ainsi on s'y retrouverait dans la navigation, ce qui n'est pas le cas ici.

Voici le CSS et le code concernant la page d'accueil :
Code:
/*--------------------------------- PA ---------------------------------*/

    /* Fond */
    .fondsgénéraux {
      background-color: #1B1B1F;
      width: 700px;
      padding: 15px;
      color: #767676;
    }

    .blocpa {
      width: 220px;
      padding: 15px;
      background-color: #141517;
    }

    .blocpa:hover {
      width: 220px;
      background-color: #141517;
      border-left: 2px solid #2F3C3E;
      border-right: 2px solid #2F3C3E;
    }

    /* Titres */
    .titrePA1 {
      font-family: parisienne;
      font-size: 35px;
      color: #FE6D6D;
      z-index: 1px;
      position: relative;
    }

    .titrePA2 {
      font-family: parisienne;
      font-size: 25px;
      color: #F0F0F0;
      position: relative;
    }

    .titrePA2:hover {
      font-family: parisienne;
      font-size: 25px;
      color: #FE6D6D;
      position: relative;
    }

    .titrePA3 {
      font-family: parisienne;
      font-size: 25px;
      color: #FE6D6D;
      position: relative;
    }

    .titrePA3:hover {
      font-family: parisienne;
      font-size: 25px;
      color: #F0F0F0;
      position: relative;
    }

    /* Système onglets */
    .paonglet {
      display: inline-block;
      cursor: pointer;
    }

    .contenu_paonglet {
      display: none;
      width: 250px;
      height: 360px;
      background-color: #141517;
    }

    .contenu_paonglet:hover {
      display: none;
      width: 250px;
      background-color: #141517;
      border-left: 2px solid #2F3C3E;
      border-right: 2px solid #2F3C3E;
    }

    /* Info-bulles staff */
    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }

    d.info:hover {
      z-index: 25;
    }
    
   d.info span {
      display: none;
    }
    
   d.info:hover span {
      display: block;
      position: absolute;
      top: -2em;
     left: -2em;
      width: 120px;
      height: 50px;
      background-color: #1B1B1F;
      color: #16161A;
      text-align: center;
      font-weight: none;
    }

    /* Info-bulles prédef */
    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }
    
   c.info:hover {
      z-index: 25;
    }
    
   c.info span {
      display: none;
    }
    
   c.info:hover span {
      display: block;
      position: absolute;
      top: -7.3em;
     left: -0.2em;
      border-radius: 50%;
      width: 85px;
      height: 85px;
      background-color: #1B1B1F;
      color: #16161A;
      text-align: center;
      font-weight: none;
    }

    /* Images Prédef */
    .imgPA {
      border-radius: 50%;
      width: 80px;
      height: 80px;
    }

    /* Images Staff */
    .imgwidget {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    .imgwidget:hover {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }

    /* Top Sites */
    .tops {
      -moz-transform: rotate(20deg);
      -webkit-transform: rotate(20deg);
      transform: rotate(20deg);
      width: 40px;
    }

    .tops:hover {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      width: 40px;
    }

    /*--------------------------------- FIN PA ---------------------------------*/

Code:

<div class="fondsgénéraux">
 
<center>
 
<div class="titrePA1">
 Once Upon A Time
</div><img src="http://nsa31.casimages.com/img/2014/01/25//140125112012539200.png" style="margin-top: -50px; WIDTH: 100px; margin-left: 320px; opacity: 0.5px" />
</center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<center>
 <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script>
<div class="contenu_paonglets">
 
<div id="contenu_paonglet_contexte" class="contenu_paonglet">
 
<div class="titrePA2">
 Contexte
</div><img src="http://data2.whicdn.com/images/97872350/large.jpg" style="width: 200px" /> <br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto;">
 Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque. <a href="http://rpgiletaitunefois.lesmots.net/t13-le-contexte" style="COLOR: #fe6d6d !important">La suite</a>
</div>
 
</div>
 
<div id="contenu_paonglet_encours" class="contenu_paonglet">
 
<div class="titrePA2">
 Actuellement ...
</div><img src="http://data2.whicdn.com/images/83773104/large.gif" style="WIDTH: 200px" /> <br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 175px; COLOR: #767676; OVERFLOW: auto;">
 Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque.
</div>
 
</div>
 
</div><br />
<div class="paonglets">
 <span onclick="javascript:change_paonglet('contexte');" id="paonglet_contexte" class="paonglet_0 paonglet"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png" /></span> <span onclick="javascript:change_paonglet('encours');" id="paonglet_encours" class="paonglet_0 paonglet"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png" /></span>
</div>
 <script type="text/javascript">
            //<!--
                    var anc_paonglet = 'contexte';
                    change_paonglet(anc_paonglet);
            //-->
            </script><br /><br />
<div class="blocpa">
 
<div class="titrePA2">
 Liens utiles
</div><br /><select onchange="location = this.value" style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a"> <option>Faites votre choix</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
</div><br /><br />
<div class="blocpa">
 
<div class="titrePA2">
 Les manitou-tou
</div><d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d>
</div>
 
</center>
 
</td>
 
<td style="WIDTH: 20px">
 
</td>
 
<td>
 
<center>
 
<div style="WIDTH: 350px" class="blocpa">
 
<div class="titrePA2">
 Nos actualités
</div><br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 300px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto">
 <span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br />
</div><br /><br />
<div class="titrePA2">
 Nos vedettes manquantes sont ...
</div>
 <br /><br /> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c>
</div><br />
<div style="WIDTH: 300px" class="blocpa">
 
<div class="titrePA2">
 Pensez à survoler tout élément suspect !
</div>
 
</div><br />
<div style="WIDTH: 350px" class="blocpa">
 
<div class="titrePA2">
 Si tu nous aimes, prouve-le !
</div><a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a><br /><a href="#" style="FONT-FAMILY: georgia; COLOR: #fe6d6d !important"><em>Et sois récompensé</em></a>
</div>
 
</center>
 
</td>
 
</tr>
 
</tbody>
 
</table><br /><a style="color: #767676 !important;" href="http://www.never-utopia.com">© Halloween</a>
</div><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

Pouvez-vous m'aider ?
J'espère que vous avez compris mon problème, si vous avez besoin d'un schéma, faites-le moi savoir.

Merci d'avance !


Dernière édition par Asaki le Mer 4 Juin 2014 - 23:22, édité 1 fois

Asaki
**

Messages : 65
Inscrit(e) le : 10/06/2010

http://naoko.forumactif.org/forum.htm
Asaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer d'image lorsque l'onglet est actif ou non.

Message par Asaki le Mar 3 Juin 2014 - 9:49

Bonjour !
Mon problème est toujours d'actualité. Smile

Asaki
**

Messages : 65
Inscrit(e) le : 10/06/2010

http://naoko.forumactif.org/forum.htm
Asaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer d'image lorsque l'onglet est actif ou non.

Message par Lixyr le Mer 4 Juin 2014 - 19:37

Bonjour,

En fait pour que ça fonctionne il faudrait supprimer les images de fond, et mettre un background, qu'on modifie ensuite via du JavaScript en fonction de l'onglet sur lequel on a cliqué.
Donc déjà mettre le fond gris à l'onglet de base et le fond blanc à l'onglet qui n'est pas sélectionné pour que ça s'affiche bien à l'affichage du forum, et ensuite modifié ça en fonction d'où on clique, c'est-à-dire que dans la fonction onclick il faudrait dire que :
- si on clique sur l'onglet 1 alors l'onglet 1 est gris et l'onglet 2 est blanc
- si on clique sur l'onglet 2 alors l'onglet 2 est gris et l'onglet 1 est blanc,

Bref au niveau du HTML ça donne ça :

Code:
<div class="fondsgénéraux">
   
   <center>
      
      <div class="titrePA1">
          Once Upon A Time
      </div><img src="http://nsa31.casimages.com/img/2014/01/25//140125112012539200.png" style="margin-top: -50px; WIDTH: 100px; margin-left: 320px; opacity: 0.5px" />
   </center>
   
   <table>
      
      <tbody>
         
         <tr>
            
            <td>
               
               <center>
                   <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
         
      } 
 //-->
 
            </script>
                  <div class="contenu_paonglets">
                     
                     <div id="contenu_paonglet_contexte" class="contenu_paonglet">
                        
                        <div class="titrePA2">
                            Contexte
                        </div><img src="http://data2.whicdn.com/images/97872350/large.jpg" style="width: 200px" /> <br /><br />
                        <div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto;">
                            Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque. <a href="http://rpgiletaitunefois.lesmots.net/t13-le-contexte" style="COLOR: #fe6d6d !important">La suite</a>
                        </div>
                        
                     </div>
                     
                     <div id="contenu_paonglet_encours" class="contenu_paonglet">
                        
                        <div class="titrePA2">
                            Actuellement ...
                        </div><img src="http://data2.whicdn.com/images/83773104/large.gif" style="WIDTH: 200px" /> <br /><br />
                        <div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 175px; COLOR: #767676; OVERFLOW: auto;">
                            Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque.
                        </div>
                        
                     </div>
                     
                  </div><br />
                  <div class="paonglets">
                      <span onclick="javascript:change_paonglet('contexte');javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';" id="paonglet_contexte" class="paonglet_0 paonglet" style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png); height: 10px; width: 10px;"></span>
<span onclick="javascript:change_paonglet('encours');;javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';" id="paonglet_encours" class="paonglet_0 paonglet" style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png); height: 10px; width: 10px;"></span>
                  </div>
                   <script type="text/javascript">
                //<!--
                        var anc_paonglet = 'contexte';
                        change_paonglet(anc_paonglet);
                //-->
                </script><br /><br />
                  <div class="blocpa">
                     
                     <div class="titrePA2">
                         Liens utiles
                     </div><br /><select onchange="location = this.value" style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a"> <option>Faites votre choix</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
                  </div><br /><br />
                  <div class="blocpa">
                     
                     <div class="titrePA2">
                         Les manitou-tou
                     </div><d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d>
                  </div>
                  
               </center>
               
            </td>
            
            <td style="WIDTH: 20px">
               
            </td>
            
            <td>
               
               <center>
                  
                  <div style="WIDTH: 350px" class="blocpa">
                     
                     <div class="titrePA2">
                         Nos actualités
                     </div><br /><br />
                     <div style="TEXT-ALIGN: justify; WIDTH: 300px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto">
                         <span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br />
                     </div><br /><br />
                     <div class="titrePA2">
                         Nos vedettes manquantes sont ...
                     </div>
                      <br /><br /> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c>
                  </div><br />
                  <div style="WIDTH: 300px" class="blocpa">
                     
                     <div class="titrePA2">
                         Pensez à survoler tout élément suspect !
                     </div>
                     
                  </div><br />
                  <div style="WIDTH: 350px" class="blocpa">
                     
                     <div class="titrePA2">
                         Si tu nous aimes, prouve-le !
                     </div><a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a><br /><a href="#" style="FONT-FAMILY: georgia; COLOR: #fe6d6d !important"><em>Et sois récompensé</em></a>
                  </div>
                  
               </center>
               
            </td>
            
         </tr>
         
      </tbody>
      
   </table><br /><a style="color: #767676 !important;" href="http://www.never-utopia.com">© Halloween</a>
</div><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

J'ai modifié cette partie :

<span onclick="javascript:change_paonglet('contexte');javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';" id="paonglet_contexte" class="paonglet_0 paonglet" style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png); height: 10px; width: 10px;"></span><span onclick="javascript:change_paonglet('encours');;javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';" id="paonglet_encours" class="paonglet_0 paonglet" style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png); height: 10px; width: 10px;"></span>





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer d'image lorsque l'onglet est actif ou non.

Message par Asaki le Mer 4 Juin 2014 - 23:21

Merci beaucoup pour votre aide, cela marche à merveille ! (En fait je voulais le contraire au niveau des effets, que l'onglet soit plus clair quand il est sélectionné, mais j'aurai juste à inverser les images, pas de souci. Smile)
Merci pour vos explications !

EDIT : Je suppose que c'est le même principe si on veut mettre par exemple trois onglets ?

Asaki
**

Messages : 65
Inscrit(e) le : 10/06/2010

http://naoko.forumactif.org/forum.htm
Asaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer d'image lorsque l'onglet est actif ou non.

Message par Lixyr le Jeu 5 Juin 2014 - 12:54

Si vous voulez mettre trois onglets, c'est le même principe ;
- de base, onglet 1 est blanc, onglet 2 est gris, onglet 3 est gris
- si on clique sur onglet 1, alors on met blanc pour onglet 1, gris pour onglet 2, gris pour onglet 3
- si on clique sur onglet 2, alors on met blanc pour onglet 2, gris pour onglet 1, gris pour onglet 3
- si on clique sur onglet 3, alors on met blanc pour onglet 3, gris pour onglet 1, gris pour onglet 2

Il faut également faire attention aux id.

Code:
<span style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png); height: 10px; width: 10px;" id="paonglet_contexte" class="paonglet_0 paonglet" onclick="javascript:change_paonglet('contexte');javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';javascript:document.getElementById('paonglet_3').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';"></span>

<span style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png); height: 10px; width: 10px;" id="paonglet_encours" class="paonglet_0 paonglet" onclick="javascript:change_paonglet('encours');javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';javascript:document.getElementById('paonglet_3').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';"></span>

<span style="background-image: url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png); height: 10px; width: 10px;" id="paonglet_3" class="paonglet_0 paonglet" onclick="javascript:change_paonglet('encours');javascript:document.getElementById('paonglet_3').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png)';"></span>

Là j'ai appelé l'onglet 3 'paonglet_3' mais vous l'appelez comme vous voulez.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr 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