Discussion :

[wyllos]

Ce topic est un peu vieux mais je dois faire un peu la même chose mais je n'y arrive pas, un peu novice en javascript, je ne comprends pas comment faire l'appel des boutons.
J'ai 3 div j'ai donc fait comme cela:
JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
	 function DivStatus(le_bouton)
{
   var div1 = document.getElementById("conv1");
   var div2 = document.getElementById("conv2");
   var div3 = document.getElementById("conv3");
 
   if(le_bouton == "bouton1")
   {
        if(div1.className == "cachediv")
              div1.className == "showdiv";
        else
              div1.className == "cachediv";
 
        if(div2.className == "showdiv")
              div1.className == "cachediv";
			  div3.className == "cachediv";
   }
   else if(le_bouton == "bouton2")
   {
        if(div2.className == "cachediv")
              div2.className == "showdiv";
        else
              div2.className == "cachediv";
 
        if(div1.className == "showdiv")
              div2.className == "cachediv";
			  div3.className == "cachediv";
   }
   else if(le_bouton == "bouton3")
   {
   		if(div3.className == "cachediv")
			  div3.className == "showdiv";
		else
			  div3.className == "cachediv";
 
		if(div2.className == "showdiv")
              div3.className == "cachediv";
			  div1.className == "cachediv";
 
   }
}

mon html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div name="conv1" id="conv1" class="showdiv">
         <a href="javascript:DivStatus('bouton3')"><img id="mon_image2" src="images/convic/image2" alt="" name="mon_image2" width="170" height="170" border="0" /></a>
 
<a href="javascript:DivStatus('bouton1')"><img id="mon_image3" src="images/convic/image3" alt="" name="mon_image3" width="170" height="170" border="0" /></a>
</div>
 
<div name="conv2" id="conv2" class="showdiv">
         <a href="javascript:DivStatus('bouton2')"><img id="mon_image3" src="images/convic/image3" alt="" name="mon_image3" width="170" height="170" border="0" /></a>
 
<a href="javascript:DivStatus('bouton1')"><img id="mon_image3" src="images/convic/image3" alt="" name="mon_image3" width="170" height="170" border="0" /></a>
</div>

la troisieme div est identique.

Pouvez-vous me dire comment faire?

Merci de votre aide.

Wyllos

[SpaceFrog]

la même chose que quoi ?????

[RomainVALERI]

Pouvez-vous me dire comment faire?

Comment faire quoi ?????

Aaaah ! la recette de la pâte à crêpe ?
Eh ben tu prends

200g de farine
50g de sucre
50g de beurre
1/2 litre de lait

Tu réunis la farine en fontaine dans un... *non ? c'est pas ce que tu voulais ?*

[wyllos]

Quand j'arrive sur ma page j'ai ma div conv1 qui doit être visible, mes div conv2 et conv3 ne doivent pas l'être. Dans chacune de ces div j'ai 2 images qui me servent de bouton pour afficher une ou l'autre des div masquer.
Je ne sais pas trop comment faire.
J'ai essayé en mettant le code ci-dessus mais j'ai aucune modification des div.

J'espère être un peu plus explicite.


Wyllos

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if(div1.className == "cachediv")
              div1.className == "showdiv";

Euh, là, ce que tu fais, c'est que si div1 a pour classe 'cachediv', tu testes si div1 a pour classe 'showdiv'... c'est pas très cohérent

Ce serait plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if(div1.className == "cachediv")
              div1.className = "showdiv";

[scourjean]

Je ne sais pas si c'est ce que tu voulais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script type="text/javascript">
function DivStatus(le_bouton)
{
	var div1 = document.getElementById("conv1");
	var div2 = document.getElementById("conv2");
	var div3 = document.getElementById("conv3");
 
	if(le_bouton == "bouton1")
	{
		div1.className = "showdiv";
		div2.className = "cachediv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton2")
	{
		div1.className = "cachediv";
		div2.className = "showdiv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton3")
	{
   		div1.className = "cachediv";
		div2.className = "cachediv";
		div3.className = "showdiv";
	}
}
</script>
<style type="text/css">
	.cachediv{
		display:none;
	}
	.showdiv{
		display:block;
	}
</style>
<div name="conv1" id="conv1" class="showdiv">
	<a href="javascript:DivStatus('bouton2')"><img id="mon_image2" src="images/convic/image2" alt="mon_image2" name="mon_image2" width="170" height="170" border="0" /></a>
	<a href="javascript:DivStatus('bouton3')"><img id="mon_image3" src="images/convic/image3" alt="mon_image3" name="mon_image3" width="170" height="170" border="0" /></a>
</div>
 
<div name="conv2" id="conv2" class="cachediv">
	<a href="javascript:DivStatus('bouton1')"><img id="mon_image1" src="images/convic/image1" alt="mon_image1" name="mon_image1" width="170" height="170" border="0" /></a>
	<a href="javascript:DivStatus('bouton3')"><img id="mon_image3" src="images/convic/image3" alt="mon_image3" name="mon_image3" width="170" height="170" border="0" /></a>
</div>
 
<div name="conv3" id="conv3" class="cachediv">
	<a href="javascript:DivStatus('bouton1')"><img id="mon_image1" src="images/convic/image1" alt="mon_image1" name="mon_image1" width="170" height="170" border="0" /></a>
	<a href="javascript:DivStatus('bouton2')"><img id="mon_image2" src="images/convic/image2" alt="mon_image2" name="mon_image2" width="170" height="170" border="0" /></a>
</div>

[wyllos]

Alors en fait je crois avoir compris mon problème mais je sais pas comment le résoudre. Donc je vous explique:

j'ai donc 3 div avec à l'intérieur de chacune 2 images. Ces 2 images sont mes boutons c'est à dire div1 bouton2 et bouton3, div2 bouton1 et bouton3 et div3 bouton1 et bouton2.
Le souci c'est que je dois avoir au départ au moins une div visible pour avoir un groupe de bouton et la j'ai aucune div visible.

Désolé, ça fonctionne j'avais juste un problème sur les commentaires de mon code qui bloqué le code html.

Merci pour votre aide et je vais me lancer dans une formation de javascript.

Wyllos

[andry.aime]

Euh, as-tu au moins testé le code proposé par scourjean ou de faire la correction proposé par Bovino

[RomainVALERI]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function DivStatus(le_bouton)
{
	var div1 = document.getElementById("conv1");
	var div2 = document.getElementById("conv2");
	var div3 = document.getElementById("conv3");
 
	if(le_bouton == "bouton1")
	{
		div1.className = "showdiv";
		div2.className = "cachediv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton2")
	{
		div1.className = "cachediv";
		div2.className = "showdiv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton3")
	{
   		div1.className = "cachediv";
		div2.className = "cachediv";
		div3.className = "showdiv";
	}
}

Je trouve que tu as bien fait de refactoriser un peu le code de départ ^^

Je t'avoue aussi qu'en le lisant ça donne carrément envie d'aller plus loin :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function DivStatus(le_bouton) {
   var numActif = le_bouton.match(/bouton(\d+)/)[1];
   for (var i = 0; i < 3; ++i) {
      var div = document.getElementById("conv" + i);
      div.className = (numActif == i) ? "showdiv": "cachediv";
   }
}

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function DivStatus(le_bouton) {
   var numActif = le_bouton.match(/bouton(\d+)/)[1];
   var i=-1;
    while( document.getElementById("conv" + (++i)) && (div.className = (numActif == i)?"showdiv":"hidediv") ){}
    }

[Watilin]

Il manque les œufs…

[RomainVALERI]

<cuisine>

Il manque les œufs…

Une excellente remarque

et éventuellement pour parfumer (au choix) :

sucre vanillé
liqueur de fleur d'oranger
grand marnier
kirsch

</cuisine>

[wyllos]

Merci à tous cela m'a bien aidé.

Maintenant tout fonctionne bien.

Wyllos