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