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

2 participants

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

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 Mar 3 Juin 2014 - 9:49

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

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 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(https://i.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_contexte').style.backgroundImage='url(https://i.servimg.com/u/f56/18/71/36/65/sans_t12.png)';" id="paonglet_contexte" class="paonglet_0 paonglet" style="background-image: url(https://i.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(https://i.servimg.com/u/f56/18/71/36/65/sans_t10.png)';javascript:document.getElementById('paonglet_encours').style.backgroundImage='url(https://i.servimg.com/u/f56/18/71/36/65/sans_t12.png)';" id="paonglet_encours" class="paonglet_0 paonglet" style="background-image: url(https://i.servimg.com/u/f56/18/71/36/65/sans_t10.png); height: 10px; width: 10px;"></span>


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Changer d'image lorsque l'onglet est actif ou non. 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Changer d'image lorsque l'onglet est actif ou non. 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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 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

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


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Changer d'image lorsque l'onglet est actif ou non. 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Changer d'image lorsque l'onglet est actif ou non. 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum