incrementer une variable pour avoir un href dynamique

**Manu300886** · 19/06/2011, 13h08

Salut à tous,

j'ai un iframe qui m'affiche une photo.

j'ai un bouton NEXT qui doit me permettre de modifier le lien de la photo à mettre dans mon iframe à chaque click sur le bouton next

Au chargement, je veux mettre ma photo DSC001 dans mon iframe
AU 1er click, je veux mettre ma photo DSC002 et ainsi de suite à chaque click

Voila ou j'en suis :

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
 
<iframe src="#" name="idFrame" id="idFrame" width="500" 
height="300"></iframe>
 
<script>
 
var Link1;
var i = 1;
var Link1 =  'DSC00'+i+'.JPG' ;
 
document.write('<a target="idFrame" href="'+Link1+'" 
onclick(){incrementation();}>MON_LIEN</a>') ;
 
function incrementation(){
i++;
Link1 = 'DSC00'+i+'.JPG' ;
}
</script>

Helas :
1) Au chargement, mon iframe est vide au lieu d'avoir l'image DSC001
2) l'incrementation ne marche pas

Merci d'avance pour votre bonté

**RomainVALERI** · 19/06/2011, 15h47

pourquoi définir deux fois la variable Link1 ?
pourquoi document.write ??
pourquoi écrire un lien ???
pourquoi concaténer un attribut href aussi mystique et incompréhensible ????
et surtout
pourquoi une iframe ?????

Je n'ai pas le temps j'ai du monde qui arrive dans deux minutes mais si personne n'est passé t'aider à réécrire ça proprement avant ce soir je m'y colle

**Eric2a** · 19/06/2011, 15h52

Salut,

Nul besoin de passer par un iframe. On peut ajouter et mettre à jour directement l'image dans le document.

L'idéal est de placer dans le document deux éléments HTML (div) déstinés à contenir l'image et le lien. Lequels seront ajoutés dans le document une fois celui-ci chargé en mémoire.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript">//<![CDATA[
		var currentImage=1;
 
		// Renvoie le nom du fichier courant
		function getCurrentImage(){
			return 'DSC00'+currentImage+'.JPG';
		}
 
		// Incrementation du pointeur et mise à jour de l'image
		function incrementation(){
			var img=document.getElementById('image');if(!img)return false;
			currentImage++;
			img.src=getCurrentImage();
			return false;
		}
 
		// Ajoute l'image et le lien dans le document
		function Init(){
			var e,elt,img,a;
			try{
				img=document.createElement('img');
				img.id='image';
				img.src=getCurrentImage();
				img.width=500;img.height=300;
				elt=document.getElementById('img_container');
				while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
				elt.appendChild(img);
 
				a=document.createElement('a');
				a.setAttribute('href','#');
				a.appendChild(document.createTextNode('Photo suivante'));
				a.onclick=incrementation;
				elt=document.getElementById('lnk_container');
				while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
				elt.appendChild(a);
			}catch(e){}
			return false;
		}
 
		// Appel Init une fois le document chargé
		window.onload=Init;
	//]]>
	</script>
</head>
<body>
	<div id="img_container">
		Emplacement de l'image
	</div>
 
	<div id="lnk_container">
		Emplacement du lien
	</div>
</body>
</html>

**Manu300886** · 19/06/2011, 21h23

Romain : bien cool ton site de generation aleatoire ^^
surtout les sondages en fait

sinon mon bout de code c est un enchainement de circonstances ajouté au fait que je connais vraiment pas grand chose en javascript. Ca m avais l air d etre la bonne piste...

Eric : merci ça à l air bien mais ca marche pas.

j ai fait une page test.html avec un copier coller de ton code.
dans le meme dossier, j ai mis une photo DSC001 et une autre DSC002

quand je charge la page, la photo DSC001 s affiche bien. La DSC002 ne s affiche pas quand je clique sur photo suivante

Je comprend pas grand chose à ton code, est ce que tu pourrai me mettre un peu plus de commentaires pour m aider ?

Merci en tout cas !

**Manu300886** · 19/06/2011, 21h26

j'ai rien dit ça marche trés bien

par contre je veux bien comprendre un peu mieux le code.
Ca pourrai me permettre de réussir à coder tout seul le bouton
"photo précédente"

**Eric2a** · 19/06/2011, 23h10

La fonction getCurrentImage retourne le nom de l'image créé à partie de la variable currentImage.

Les lignes

Code js :

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

1
2
3
4
5
6
7
img=document.createElement('img');
img.id='image';
img.src=getCurrentImage();
img.width=500;img.height=300;
elt=document.getElementById('img_container');
while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
elt.appendChild(img);

permettent d'ajouter une balise <img /> et la placer à l'interieur de l'élément HTML ayant l'identifiant 'img_container'.
Comme si nous avions saisi...

Code html :

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

1
2
3
<div id="img_container">
	<img src="DSC001.JPG" width="500" height="300" id="image" />
</div>

Il est important de donner un Id (ici image) à la balise <img /> afin de pouvoir la manipuler par la suite.

Les lignes

Code js :

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

1
2
3
4
5
6
7
a=document.createElement('a');
a.setAttribute('href','#');
a.appendChild(document.createTextNode('Photo suivante'));
a.onclick=incrementation;
elt=document.getElementById('lnk_container');
while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
elt.appendChild(a);

permettent d'ajouter le lien et de le placer à l'interieur de l'élément HTML ayant l'identifiant 'lnk_container'.
Comme si nous avions saisi...

Code html :

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

1
2
3
4
 
<div id="nk_container">
	<a href="#" onclick="return incrementation();">Photo suivante</a>
</div>

Dans la fonction incrementation, nous devons utiliser l'Id de l'image pour accéder à cette derniere.

Pour ce faire, nous avons la méthode document.getElementById.

Code js :

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

1
2
3
4
 
var img=document.getElementById('image'); // img represente l'élément <img /> ayant l'id 'image'.
 
img.src=getCurrentImage(); // On modifie l'attribut src

**RomainVALERI** · 20/06/2011, 00h14

Fonctionnel, clair, complet, détaillé.
T'as de la chance qu'Eric ait pris le temps de faire ça aussi bien Manu

moi en tout cas je n'aurais certainement pas fait mieux ^^

Chapeau Eric

**Eric2a** · 20/06/2011, 17h45

Merci Romain,

Envoyé par RomainVALERI

je n'aurais certainement pas fait mieux

Seuls ceux qui ne t'ont pas encore lu ou qui ne connaissent pas ton générateur de phrase peuvent encore y croire

**kamaralay** · 04/07/2012, 16h52

merci pour ce forum; finalement, j'ai la solution de mon problème; j'ai appris une technique de plus

j'ai l'impression qu'ici, je pourrai poser toutes les questions qui me tracassent et pouvoir compter sur vous pour apprendre à programmer davantage.

ailleurs, il m'a suffit de poser deux questions pour être injurié trois; les gens y sont pour se dire super technos...