Discussion :

[haNjo]

Bonjour,

J'ai d�j� parcouru pas mal de thread, mais une interrogation subsiste pour moi dans mon code. Je ne suis pas un habitu� du js

Voici mon objectif (tr�s simple):
J'ai un bouton select, en fonction du choix j'affiche un div ou un autre sans valider quoi que ce soit -> je s�lectionne, �a s'affiche.

Voici mon code:
Javascript:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
	function changementType() {
		var ville = document.getElementById("ville").value;
		if (ville == "mons")	{
		document.getElementById("infoMons").style="display:block";
		document.getElementById("infoBinche").style="display:none";
		} 
		else {
		document.getElementById("infoMons").style="display:none";
		document.getElementById("infoBinche").style="display:block";
		}
</script>

Et le select ainsi que les en-t�tes des div:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
<select name="ville" id="ville" onchange="changementType();">
	<option value="mons">Mons</option>
	<option value="binche">Binche</option>
</select>
<div id="infoMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
 
<div id="infoBinche" style=" margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>

J'ai l'impression que mon code n'a aucun effet.

Est-ce que j'utilise mal le script js ou mon code est totalement erron�?

Merci de votre attention.

hNj

[Invit�]

salut,

quasi good :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById("infoMons").style.display="block";

tu as �galement oubli� de fermer une accolade pour ta fonction changementType.

[haNjo]

Parfait, un grand merci

[haNjo]

Bonjour,

J'ai une question vis-�-vis du m�me style de script. J'ai modifi� mon script pour qu'il puisse afficher ou cacher des div via des liens. J'aimerai maintenant que ce script permette de cacher le div afficher lorsque je clique sur un autre lien. Donc qu'on ne puisse avoir qu'un seul div affich� � la fois.

Voici mon script js:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
	function visibilite(thingId) { 
		var targetElement; 
		targetElement = document.getElementById(thingId) ; 
		if (targetElement.style.display == "none") 	{ 
			targetElement.style.display = "" ; 	} 
		else { 
			targetElement.style.display = "none" ; } 
	}
		</script>

Et mes div + boutons

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
<a id="nom" value="monsInfo" href="javascript:visibilite('infoMons');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Contact</a>
<div id="infoMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display: none;"></div>
 
<a id="nom" value="monsHoraire" href="javascript:visibilite('horaireMons');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Horaire</a>
<div id="horaireMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display: none;"></div>
 
<a id="nom" value="bincheInfo" href="javascript:visibilite('infoBinche');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Contact</a>
<div id="infoBinche" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
 
<a id="nom" value="bincheHoraire" href="javascript:visibilite('horaireBinche');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Horaire</a>
<div id="horaireBinche" style=" margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;">

Faut-il beaucoup modifier?

Merci!

[Invit�]

non,

il suffit que tu caches tous les div (sauf celui que tu veux afficher �ventuellement), et apr�s tu affiches celui que tu veux afficher.

[haNjo]

non,

il suffit que tu caches tous les div (sauf celui que tu veux afficher �ventuellement), et apr�s tu affiches celui que tu veux afficher.

Ils sont tous "hidden", mais lorsque j'ouvre par exemple le div "monsInfo", et que par apr�s j'ouvre le div "monsHoraire", j'aimerai que le div "monsInfo" se referme automatiquement.

Y a-t-il quelque chose � modifier?

[Invit�]

ben non ils sont pas tous hidden tu le dis toi m�me :

j'ouvre par exemple le div "monsInfo"

Il faut que � chaque fois que tu affiches un div, tu caches tous les autres.
Actuellement quand tu affiches un div, tu en caches un autre. Ben l� tu les caches tous sauf si c'est celui que tu d�sires afficher.

Et apr�s tu l'affiches.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
function visibilite(thingId) {
 pour tous les div qu'on veut masquer/afficher
  si div.id!=thingId
   //c'est un div à cacher
   div.style.display="none"
 fin pour
 //et tu affiches ton div adoré
 document.getElementById(thingId).style.display='';
}

A la syntaxe pr�s

[haNjo]

Merci!
J'ai abouti � ceci comme script 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
 
<script type="text/javascript">
	var elmtOuvert = "";
	var nOuvert = 0;
 
	function switchDiv(n) {  
		var id;
		if (nOuvert==n)
			n = 0;
		switch(n) { 
			case 0:
				id = "";
				break;
			case 1:
				id="infoMons";
				break;
			case 2:
				id="horaireMons";
				break;
			case 3:
				id="infoBinche";
				break;
			case 4:
				id="horaireBinche";
				break;
			}  
		if (elmtOuvert!="")
			document.getElementById(elmtOuvert).style.display="none";
		if (id!="")
			document.getElementById(id).style.display="block";
 
		elmtOuvert = id;
		nOuvert = n;
	}
</script>

Et mes lien/div sont construits comme ceci:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
<a id="nom" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo" >Contact</a>
<div id="infoMons" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white"></div>

Merci pour le coup de main

[haNjo]

Je continue dans ma recherche d'am�lioration de mon script.

Je suis entrain d'essayer d'ins�rer (devant le texte du lien permettant d'afficher ou masquer un div) une image [+] lorsque le div est masqu�, et [-] lorsqu'il est affich�.

J'ai trouv� des solutions avec des buttons, mais moi je d�sire simplement rajouter une image et je suppose qu'en changeant le lien de la source (src=""), ca peut fonctionner. J'ai voulu impl�menter cela et donc ins�rer une modification par id, mais voil�...

J'ai tent� de nommer chacune de mes images avec un id (donc 4, vu que j'ai 4 liens qui permettent d'afficher 4 div), j'ai rajout� dans mon switch une variable idimg="" la valeur de l'id de mon image en fonction du lien. Ensuite je me suis dit "je vais faire changer la valeur de la source dans mes conditions", mais la j'ai totalement bloqu�...

Si vous avez des liens ou des indications/explications de solutions, je suis preneur!

[Invit�]

quel est ton html et ton js?

ps : j'opterais plutot pour un tableau de div plutot que pour un switch.
Egalement plutot utiliser l'evenement onclick sur tes liens, et dans le href stocker #idDuDiv. De fait tu enquilles onclick=switchDiv(this.id); et tu n'auras plus qu'� r�cup�rer l'id du div souhait� : id.substring(1);

[Eric2a]

Salut,

+1 galerien69.

Ca ressemblerait � un truc du genre...

Code html :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css" media="screen">/*<![CDATA[*/
		.lien {
			padding:0;margin:10px 0 0 20px;font-size:0.9em;
		}
		.tab {
			padding:8px;margin:0 0 0 20px;width:512px;border:1px #ccc dashed;
			display:none;
		}
		/*]]>*/
	</style>
	<script type="text/javascript">//<![CDATA[
                var tabs=function(){
                        var bloc=[];
 
                        return{
                                select:function(url){
                                        var i,id=url.split('#')[1];
                                        for(i in bloc)bloc[i].style.display=(i==id)?'block':'none';
                                        return false;
                                },
                                init:function(){
                                        var i,lnk,tab,elt=document.getElementById('nav');
                                        lnk=elt && elt.getElementsByTagName('a');
                                        if(!lnk)return;
 
                                        for(i=0;i<lnk.length;i++){
                                                url=lnk[i].href;
                                                if(url){
                                                        tab=url.split('#');
                                                        if(tab.length==2&& tab[1]!=''){
                                                                id=tab[1];
                                                                elt=document.getElementById(id);
                                                                id=(elt && elt.className=='tab')?id:false;
                                                                if(id){
                                                                        bloc[id]=elt;
                                                                        lnk[i].onclick=function(){return tabs.select(this.href);};
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }();
 
                window.onload=tabs.init;
                //]]>
        </script>
</head>
<body>
	<div id="nav">
		<a href="#un" class="lien">Un</a>
		<a href="#deux" class="lien">Deux</a>
		<a href="#trois" class="lien">Trois</a>
		<a href="#quatre" class="lien">Quatre</a>
	</div>
	<div id="tabs">
		<div class="tab" id="un">Premier bloc</div>
		<div class="tab" id="deux">Deuxième bloc</div>
		<div class="tab" id="trois">Troisième bloc</div>
		<div class="tab" id="quatre">Quatrième bloc</div>
	</div>
</body>
</html>

[haNjo]

Merci messieurs mais la, j'suis perdu

Je comprends une majeure partie du code je comprends, mais ne voit pas en quoi c'est "mieux" que mon switch? :s

Je vous mets la page avec tout ce qu'il faut pour voir ce que j'ai

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
50
51
52
53
54
55
56
57
58
59
60
61
 
<html>
    <head>
	<script type="text/javascript">
		var elmtOuvert = "";
		var nOuvert = 0;
		function switchDiv(n) {  
			var id;
			if (nOuvert==n)
				n = 0;
			switch(n) { 
				case 0:
					id = "";
					break;
				case 1:
					id="infoMons";
					break;
				case 2:
					id="horaireMons";
					break;
				case 3:
					id="infoBinche";
					break;
				case 4:
					id="horaireBinche";
					break;
				}  
			if (elmtOuvert!="")
			document.getElementById(elmtOuvert).style.display="none";
			if (id!="")
				document.getElementById(id).style.display = "block";
 
			elmtOuvert = id;
			nOuvert = n;
		}
		</script>
	</head>
    <body>
	<div id="main">
		<div class="columnLeft">
			<div class="headerLeft" style="width: 100%;height:200px;">
			</div>
			<a id="nom" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo">Contact</a>
			<div id="infoMons" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
			<br /><br />	
			<a id="nom" value="monsHoraire" href="javascript:switchDiv(2);" class="linkinfo">Horaire</a>
			<div id="horaireMons" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
			<br />
			<a id="nom" value="bincheInfo" href="javascript:switchDiv(3);" class="linkinfo">Contact</a>
			<div id="infoBinche" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
			<br /><br >
			<a id="nom" value="bincheHoraire" href="javascript:switchDiv(4);" class="linkinfo">Horaire</a>
			<div id="horaireBinche" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
		</div>			
	</div>
    </body>	
</html>

J'aimerais juste ajouter quelque chose du style

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<img src="imges/plus.png" id="???">

� l'int�rieur de mes balises <a></a> et que celle-ci change en "images/moins.png" lorsque je click sur le lien et cela se produisant pour chaque lien (une image par lien)

En ajoutant une r�f�rence dans mon switch, je pourrais changer la valeur de la source des images, non?

Merci � vous!

[Invit�]

pour reprendre mon poste d'avant, le href du lien a du sens de pointer vers le div parce que c'est le contenu d�sir�.

L'image est plus un �l�ment annexe (enfin l'un ou l'autre). Donc c'est pas naturel de mettre un "truc" dans a qui va r�f�rencer l'image qu'on souhaite afficher.

Tu peux nommer tes images en correspondance avec des div.
C�t� javascript, tu fais simplement quelquechose comme :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var imgs={
 horaireMons:'/monCheminVersLimageMons',
 monBinche:'/idemVersBinche'
};

c'est un tableau associatif (un objet en fait, mais on peut voir ca comme un tableau associatif).
Du coup dans ton switch, lorsque tu affiches lelement, tu changes �galement la source :
document.getElementById(myImageId).src = imgs[id];//avec id qui vaut par exemple horaireMons.

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<html>
    <head>
	<script type="text/javascript">
		var elmtOuvert = "";
		var nOuvert = 0;
		//MODIFICATIONS
		var myImageId='myImage';//id of the image we want to change src
		var imgs={
     horaireMons:'http://www.planete-brico.com/img/super/_power_ranger_rouge.jpg',
     infoBinche:'http://upload.kiweo.com/forum/f_t1190638125_h714.jpg',
     infoMons:'http://perlbal.hi-pi.com/blog-images/20507/gd/1171537036/Power-Ranger-Bleu.jpg',
     horaireBinche:'http://9b.img.v4.skyrock.net/9bc/ninjaranger/pics/1736985688.jpg'
    };
    //END
		function switchDiv(n) {  
			var id;
			if (nOuvert==n)
				n = 0;
			switch(n) { 
				case 0:
					id = "";
					break;
				case 1:
					id="infoMons";
					break;
				case 2:
					id="horaireMons";
					break;
				case 3:
					id="infoBinche";
					break;
				case 4:
					id="horaireBinche";
					break;
				}  
			if (elmtOuvert!="")
			document.getElementById(elmtOuvert).style.display="none";
			if (id!=""){
  			document.getElementById(id).style.display = "block";
 
		//MODIFICATIONS
  			document.getElementById(myImageId).src=imgs[id];
    //END
			}
 
			elmtOuvert = id;
			nOuvert = n;
		}
		</script>
	</head>
    <body>
      <img id="myImage" src="http://www.defenders.org/images/thumbs_general/panda_50x50.jpg" width="100" height="100"/>
			<a id="nom" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo">monsInfo</a>
			<a id="nom" value="bincheInfo" href="javascript:switchDiv(3);" class="linkinfo">bincheInfo</a>
			<a id="nom" value="bincheHoraire" href="javascript:switchDiv(4);" class="linkinfo">binchHoraire</a>
  		<a id="nom" value="monsHoraire" href="javascript:switchDiv(2);" class="linkinfo">monsHoraire</a>
 
			<div id="horaireMons" style="display: none">a</div>
			<div id="infoMons" style="display: none">b</div>
			<div id="infoBinche" style="display: none">c</div>
			<div id="horaireBinche" style="display: none">d</div>
 
    </body>	
</html>

Au niveau du switch c'est de mani�re g�n�rale � �viter pour les raisons suivantes :
Probl�me de syntaxe : si tu oublies un break par exemple, tu executes toutes les alternatives suivantes...
C'est �galement un probleme de factorisation du code. Dans ton cas ca va (a peu pr�s) parce que tu mets la logique derriere (document.getElementBy(idDefiniDansLeSwitch)).
N�anmoins, tu en fais un alors qu'il sert � rien :

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
var elmtOuvert = "horaireMons";
		//MODIFICATIONS
		var myImageId='myImage';//id of the image we want to change src
		var imgs={
     horaireMons:'http://www.planete-brico.com/img/super/_power_ranger_rouge.jpg',
     infoBinche:'http://upload.kiweo.com/forum/f_t1190638125_h714.jpg',
     infoMons:'http://perlbal.hi-pi.com/blog-images/20507/gd/1171537036/Power-Ranger-Bleu.jpg',
     horaireBinche:'http://9b.img.v4.skyrock.net/9bc/ninjaranger/pics/1736985688.jpg'
    };
    //END
		function switchDiv(id) {  
			var id = id.split('#')[1];//horaireBinche par exemple
			document.getElementById(elmtOuvert).style.display="none";
			document.getElementById(id).style.display = "block";    
			document.getElementById(myImageId).src = imgs[id];    
 			elmtOuvert = id;
 			return false;
		}
      <img id="myImage" src="http://www.defenders.org/images/thumbs_general/panda_50x50.jpg" width="100" height="100"/>
			<a id="nom" value="monsInfo" href="#horaireMons" onclick="switchDiv(this.href)" class="linkinfo">monsInfo</a>
			<a id="nom" value="bincheInfo" href="#infoMons" onclick="switchDiv(this.href)"  class="linkinfo">bincheInfo</a>
			<a id="nom" value="bincheHoraire" href="#infoBinche" onclick="switchDiv(this.href)"  class="linkinfo">binchHoraire</a>
  		<a id="nom" value="monsHoraire" href="#horaireBinche" onclick="switchDiv(this.href)"  class="linkinfo">monsHoraire</a>

Remarque : tes a ont le m�me id, c'est pas bien.

[haNjo]

Bonjour,

Merci de vos r�ponses compl�tes, m�me si elles ne sont pas toujours clair pour moi. Je vais essayer de finir ce script avec mon switch, je regarderai pour le passer en tableau quand celui-ci fonctionnera!

J'ai un peu avanc�, il me reste juste � pouvoir revenir � mon image initial.

Je r�explique vite fait le truc car je sais pas si j'ai �t� clair:

Lien initial:

[+] Lien1
[+] Lien2

Lorsque je clique sur Lien1:

[-] Lien1
Blablabla
[+] Lien2

Quand je reclique sur Lien1, la <div> contenant "Blablabla" passe bien en hidden, mais mon image devant reste la m�me:

[-] Lien1
[+] Lien2

Et une fois que j'ai ouvert et ensuite ferm� le Lien1, je ne peux plus rien faire avec sauf si je clique d'abord sur un autre lien.

Voici mon script

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
50
51
52
53
 
var elmtOuvert = "";
var nOuvert = 0;
 
function switchDiv(n) {  
	var id;
	var ida;
	var idimg;
 
	if (nOuvert==n)
		n = 0;
 
	switch(n) { 
		case 0:
			id = "";
			ida= "";
			idimg = "images/plus.png";
			break;
		case 1:
			id = "infoMons";
			ida = "cMons";
			idimg = "imgContactMons";
			break;
		case 2:
			id = "horaireMons";
			ida = "hMons";
			idimg = "imgHoraireMons";
			break;
		case 3:
			id = "infoBinche";
			ida = "cBinche";
			idimg = "imgContactBinche";
			break;
		case 4:
			id = "horaireBinche";
			ida = "hBinche";
			idimg = "imgHoraireBinche";
			break;
		}  
	if (elmtOuvert!="") {
		document.getElementById(elmtOuvert).style.display = "none";
	}
 
	if (id!="") {
		document.getElementById(id).style.display = "block";
		// document.getElementById(idimg).src = "images/moins.png";
	}
 
	document.getElementById(idimg).src = (document.getElementById(idimg).src=="images/plus.png" ) ? "images/plus.png" : "images/moins.png"; 
 
	elmtOuvert = id;
	nOuvert = n;
}

Lien + Div

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
<a id="cMons" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo"><img id="imgContactMons" src="images/plus.png"> Contact</a>
<div id="infoMons" display: none;">

Questions:
1. Pourquoi l'image ne change-t-elle pas lorsque la source vaut "images/moins.png" ?
2. Pourquoi je ne peux ouvrir et fermer "ind�finiment" un lien sans devoir interagir avec autre chose?

P.S: La question 2 ne se pose pas lorsque je retire le code permettant de changer l'image, � savoir:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.getElementById(idimg).src = (document.getElementById(idimg).src=="images/plus.png" ) ? "images/plus.png" : "images/moins.png";

J'ai bient�t fini de vous ennuyer =)

[Invit�]

une premi�re raison est que si tu as clique deux fois sur le m�me lien, alors tu es dans le cas n=0, donc id vaut img/plus.png, ce qui est pas un id valide.
document.getElementById(idImg) lance alors une exception, et c'est mort.

J'esp�re que tu te rends compte tout de m�me que le switch fait perdre des cheveux.

Mis � part, tu peux utiliser console.log(idimg) sous firefox, si tu installes lextension firebug. C'est extremement utile!

[NoSmoking]

Questions:
1. Pourquoi l'image ne change-t-elle pas lorsque la source vaut "images/moins.png" ?
2. Pourquoi je ne peux ouvrir et fermer "ind�finiment" un lien sans devoir interagir avec autre chose?

P.S: La question 2 ne se pose pas lorsque je retire le code permettant de changer l'image, � savoir:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.getElementById(idimg).src = (document.getElementById(idimg).src=="images/plus.png" ) ? "images/plus.png" : "images/moins.png";

les comparaisons de la forme ? : s�interpr�tent de la fa�on suivante

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

CONDITION ? SI VRAI : SI FAUX

regardes avec cet exemple

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

alert( true ? 'VRAI' : 'FAUX');

[haNjo]

Je pense que ma comparaison est correcte, du moins elle change correctement, et lorsque je fait le test avec une alert avant ma condition, il affiche bien "images/plus.png"
Et apr�s, "images/moins.png".

@Galerien: Je comprends la prise de t�te un peu inutile du switch, surtout avec mon case 0. Je suppose que c'est dans celui-ci que je dois travailler pour r�soudre le probl�me. Il faudrait que je puisse r�cup�rer dans mon case 0 la valeur d'id du lien sur lequel je clique pour que le test puisse �tre v�rifi� � la fin de la fonction?

[Invit�]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(idimg)

c'est pas une question de test (enfin, si, mais ca vient apr�s). Ya pas de question d'id du lien.
Tu as idimg qui est INVALIDE.

Donc idimg est invalide quand n=0, c'est � dire quand tu as cliqu� sur le m�me lien.

Donc ici on s'arr�te et on r�fl�chit :
pourquoi tu as plusieurs idImage.
Si tu as plusieurs images, c'est pour en cacher certains et afficher une.
Si tu en as qu'une, c'est pour changer sa source.

La tu as plusieurs idImage dans ton switch, mais tu n'as qu'une seule image .

Donc soit tu te dis je mets 4 images et j'affiche celle que je veux en cons�quence et je masque les autres, soit tu changes la source de l'image, mais tu gardes un id fixe, quelquesoit le lien sur lequel tu as cliqu�.

[haNjo]

J'avais au d�but pens� mettre un idImage unique, mais apr�s je me suis demand� comment il allait identifier l'image � changer? Pour c'est en faisant un "onclick=changeImg(this)" mais je ne mets pas d'onclick sur l'image car celle-ci doit pouvoir changer que j'appuye sur le lien ou sur l'image elle-m�me.

Tu vois ce que je veux dire?

[Invit�]

ben ui. Toujours est-il que tu as une seule image avec 4 ID diff�rents...

chui d'accord que c'est bien d'apprendre par l'erreur, mais bon, pour ma part ca m'int�resse plus du tout. On continue � faire du caca sachant pertinemment (enfin je pense que tu vois quand m�me que ca parait inutilement compliqu�) qu'on fait un truc bancal et sale.

Donc bon, pour ma part, je passe la main aux autres.