Changer d'image lorsque l'onglet est actif ou non.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Changer d'image lorsque l'onglet est actif ou non.
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 :
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 !
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
Re: Changer d'image lorsque l'onglet est actif ou non.
Bonjour !
Mon problème est toujours d'actualité.
Mon problème est toujours d'actualité.
Re: Changer d'image lorsque l'onglet est actif ou non.
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 :
J'ai modifié cette partie :
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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Changer d'image lorsque l'onglet est actif ou non.
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. )
Merci pour vos explications !
EDIT : Je suppose que c'est le même principe si on veut mettre par exemple trois onglets ?
Merci pour vos explications !
EDIT : Je suppose que c'est le même principe si on veut mettre par exemple trois onglets ?
Re: Changer d'image lorsque l'onglet est actif ou non.
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.
Là j'ai appelé l'onglet 3 'paonglet_3' mais vous l'appelez comme vous voulez.
- 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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» erreur lorsque les membres veulent changer de mail
» Changer la couleur de fond du règlement lorsque l'on répond
» Changer un message "Invité" en un utilisateur actif ?
» Comment changer de place le lien sujet actif
» j'aimerais changer mon domaine perso toujours actif? possible or not?
» Changer la couleur de fond du règlement lorsque l'on répond
» Changer un message "Invité" en un utilisateur actif ?
» Comment changer de place le lien sujet actif
» j'aimerais changer mon domaine perso toujours actif? possible or not?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum