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,

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

19/06/2011, 15h47	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

20/06/2011, 00h14	#7
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

19/06/2011, 21h23	#4
Manu300886 Invité régulier manuel briot Inscription : octobre 2010 Messages : 56 Détails du profil Informations personnelles : Nom : manuel briot Informations forums : Inscription : octobre 2010 Messages : 56 Points : 7 Points : 7	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 !
	00

19/06/2011, 21h26	#5
Manu300886 Invité régulier manuel briot Inscription : octobre 2010 Messages : 56 Détails du profil Informations personnelles : Nom : manuel briot Informations forums : Inscription : octobre 2010 Messages : 56 Points : 7 Points : 7	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"
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email