incrementer une variable pour avoir un href dynamique

Version imprimable

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:

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é

19/06/2011, 15h47
RomainVALERI

8O

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 ????? :cry:

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 ;)

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:

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>

19/06/2011, 21h23
Manu300886

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... :P

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 !
19/06/2011, 21h26
Manu300886

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

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"

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

Les lignes
Code:

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:

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:

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:

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:

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

20/06/2011, 00h14
RomainVALERI

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 :ccool:
20/06/2011, 17h45
Eric2a

Merci Romain,

Citation:

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 :)
04/07/2012, 16h52
kamaralay

très content d'avoir découvert ce forum...

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...:?
04/07/2012, 20h07
RomainVALERI

Citation:

20/06/2011

Citation:

04/07/2012

>>> Wow ça c'est de la résurrection :mrgreen:

Mais en effet, sur les forums dignes de ce nom (8-)), on a des discussions qui peuvent resservir longtemps après avoir eu lieu ^^ Bonne nouvelle pour toi, bonne nouvelle pour tous !