Discussion :

[Shadam]

Bonjour,

Je cherche à "ouvrir"/"fermer" des div avec une fonction javascript.

Appel de la fonction :

Code html :

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

<input type="image" id="fleche" name="imgdivCompetences" src="http://icdn.pro/images/fr/f/l/fleche-vers-bas-icone-9481-96.png" onclick="Block(divCompetences)"/>

La fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function Block(ctrl)
 {
	var imgName;
	imgName = 'img' + ctrl;
	var current;
	current = (document.getElementById(ctrl).style.display == 'none') ? 'block' : 'none';
	if (current=='none') {
		document.getElementById(imgName).src = document.getElementById('flecheHaut').value;
	} else {
		document.getElementById(imgName).src = document.getElementById('flecheBas').value;
	}
 }

Mes deux éléments 'flecheHaut' et 'flecheBas' sont des HiddenFields dont le value est l'url de l'image qui m'intéresse.

Da'illeurs à l'instanciation de ma page je voudrais directement les appeler mais je n'y arrive pas :

Code html :

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

<input type="image" id="fleche" name="imgdivCompetences" src="document.getelementbyid('flecheBas').value;" onclick="Block(divCompetences)"/>

Merci de votre aide

[SpaceFrog]

Code :

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

document.getElementById(imgName).src

a tout hasard tu passe le name ou l'id en paramètre ?

[Shadam]

Oui effectivement je viens de me rendre compte que je passais le name

J'ai donc corrigé ça :

Code html :

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

<input type="image" id="fleche" name="imgdivFormation" src="http://icdn.pro/images/fr/f/l/fleche-vers-bas-icone-9481-96.png" onclick="blocking('divFormation')"/>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 function blocking(ctrl)
 {
	var imgName;
	imgName='img'+ctrl;
	var current;
	current=(document.getElementById(ctrl).style.display=='none')?'block':'none';
	if (current=='none') {
		document.getElementById(imgName).src=document.getElementById('flecheBas').value;
		document.getElementById(ctrl).style.display='none';
	} else {
		document.getElementById(imgName).src=document.getElementById('flecheHaut').value;
		document.getElementById(ctrl).style.display='block';
	}
 }

Et ça fonctionne très bien, même le block/none que j'ai rajouté entre temps.

Par contre je n'arrive toujours pas à afficher l'image comme ça :

Code html :

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

<input type="image" id="fleche" name="imgdivCompetences" src="javascript:document.getElementById('flecheHaut').value" onclick="blocking('divCompetences')"/>

[SpaceFrog]

src n'accepte pas de js ...

il faut passer par le onlaod de la page et attribuer ton src à ce moment là

[Shadam]

Parfait ! Ca fonctionne du tonerre de Dieu !

Merci SpaceFrog !

[Shadam]

J'ai enlevé le résolu parce qu'il s'avère que mon code js ne s'exécute que sur IE et pas sur firefox ni chrome...

J'en suis là :

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
 function blocking(ctrl)
 {
	var imgName;
	imgName='img'+ctrl;
	var current;
	current=(document.getElementById(ctrl).style.display=='none')?'block':'none';
	if (current=='none') {
		document.getElementById(imgName).src=document.getElementById('flecheBas').value;
		document.getElementById(ctrl).style.display='none';
	} else {
		document.getElementById(imgName).src=document.getElementById('flecheHaut').value;
		document.getElementById(ctrl).style.display='block';
	}
	return false;
 }
 
 window.onload=function(){
	blocking('divCompetences');
	blocking('divFormation');
	blocking('divExperience');
	blocking('divLoisirs');
	return false;
	};

et les appels :

Code html :

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

<input type="image" id="fleche" name="imgdivCompetences" src="" onclick="blocking('divCompetences')"/>

Et donc tout fonctionne nickel sur IE et rien ne se passe sur chrome et firefox...

[SpaceFrog]

tes src sont des url absolues ?

[Shadam]

oui

http://tof.canardpc.com/view/3f52f37...521841bfde.jpg

Il y en a une qui s'affiche (elle est direct dans le src de la balise img) mais pas les autres.

Plus rien ne fonctionne ni l'affichage des images ni les collapses de mes tables...

Edit : En fait si après vérification les collapses fonctionnent

[arnogues]

tes src sont des url absolues ?

nan mais il fait des getElementById sur un name en meme temps...

[SpaceFrog]

a tout hasard tu passe le name ou l'id en paramètre ?

il faisait ... il l'avait résolu... en principe

[Shadam]

Ah oui... C'est vrai...

Le souci c'est que je me sers de l'id pour le CSS, donc toutes les images ont le même id, d'où l'appelle par le nom...

Ca existe getElementByName() ?

[SpaceFrog]

Code :

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

getElementsByName()

retourne une collection

Code :

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

getElementBysName('????')[0]

retourne le premier element de la collection et peut correspondre à ton besoin si tu n'en n'a qu'un à chaque fois

sinon il faut boucler sur la collection

[Shadam]

Ouai ok mais c'est bon en fait

Mes images sont des <input type="image" /> et les seuls input de ma page, du coup j'ai mis le CSS sur input direct et j'ai changé leurs id pour pouvoir les appeler séparément.

Merci beaucoup de votre aide.

[Bovino]

Le souci c'est que je me sers de l'id pour le CSS, donc toutes les images ont le même id

Combien de fois faudra-t-il répéter qu'un id doit être unique dans la page...

Quant à ce que tu expliques, c'est le rôle dévolu aux classes, pas aux id !

[Shadam]

C'est bon m'sieur, j'ai remplacé tous mes "table#monId" pour mes CSS par des ".monCSS" et du coup chaque contrôle à son propre id.