galerie suivant précedent avec texte, lien et image qui change

**djedje37et28** · 07/09/2007, 19h56

Bonjour,

Je suis entrain d'essayer de faire une galerie photo qui change son titre, son lien et sa photo quand on clique sur le bouton suivant ou precedent.
Je me suis documenté sur un premier livre et je suis parti d'un exemple.
les photos fonctionnent mais j'aimerai que les textes et liens changent en meme temps que l image. j'ai donc fais 4 tableaux. voici le code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Image Slideshow</title>
	<script type="text/javascript" language="Javascript">
	<!-- Hide script from old browsers
 
	photos = new Array("images/pathfinder.gif","images/surveyor.gif","images/surveyor98.gif")
	modele = new Array("rouge","rechampi","noir")
	prix = new Array("729","323","696")
	lien= new Array("lien1.html","lien2.html","lien3.html")
	thisPic = 0
	total = photos.length - 1
 
	function processPrevious() {
		if (document.images && thisPic > 0) {
			thisPic--
			document.myPicture.src=photos[thisPic]
			document.lien2.href=lien[thisPic]
		}
	}
 
	function processNext() {
		if (document.images && thisPic < total) {
			thisPic++
			document.myPicture.src=photos[thisPic]
			document.lien2.href=lien[thisPic]
		}
	}
 
	// End hiding script from old browsers -->
	</script>	
</head>
<body bgcolor="#FFFFFF">
<p><a href="lien1.html" name="lien2">rouge</a></p>
	<p >729</p>
	<p>rouge</p>
	<p align="center"><img src="images/pathfinder.gif" name="myPicture" width="201" height="155" alt="Slideshow" /></p>
	<h1 align="center"><a href="javascript:processPrevious()">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="javascript:processNext()">Next &gt;&gt;</a></h1>
</body>
</html>

Le problème c est que mon

Code :

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

document.lien2.href=lien[thisPic]

n est pas du tout reconnu.
j'imagine que le src est définis dans le javascript mais href existe t il ?
Enfin est il pas possible de le faire avec un <p id="texte">texte</p>
et changer le texte ??
merci de votre aide !
j'y arriverai!

**Auteur** · 07/09/2007, 21h58

bonjour,

privilégie l'utilisation de l'attribut id à celui de name, l'accès aux éléments sera plus simple (méthode document.getElementById()).

Essaye ceci :

Code html :

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
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Image Slideshow</title>
	<script type="text/javascript" language="Javascript">
        <!-- Hide script from old browsers
 
    photos = new Array("images/pathfinder.gif","images/surveyor.gif","images/surveyor98.gif")
    modele = new Array("rouge","rechampi","noir")
    prix = new Array("729","323","696")
    lien= new Array("lien1.html","lien2.html","lien3.html")
    thisPic = 0
    total = photos.length - 1
 
    function processPrevious()
    {
     var px, md, lien, image;
     lien = document.getElementById("lien");
     md = document.getElementById("modele");
     px = document.getElementById("prix");
     image = document.getElementById("myPicture");
 
     if (thisPic > 0)
     {
            thisPic--;
                image.src=photos[thisPic];
                lien.href=lien[thisPic];
                px.innerHTML = prix[thisPic];
                md.innerHTML = modele[thisPic];
     }
        }
 
    function processNext()
    {
     var px, md, lien, image;
     lien = document.getElementById("lien");
     md = document.getElementById("modele");
     px = document.getElementById("prix");
     image = document.getElementById("myPicture");
 
     if (thisPic < total)
     {
        thisPic++;
                image.src=photos[thisPic];
                lien.href=lien[thisPic];
                px.innerHTML = prix[thisPic];
                md.innerHTML = modele[thisPic];
     }
        }
 
        // End hiding script from old browsers -->
        </script>	
</head>
 
<body style="background-color:#FFFFFF">
 
<p><a href="lien1.html" id="lien2">rouge</a></p>
	<p id="prix">729</p>
	<p id="modele">rouge</p>
	<p align="center"><img src="images/pathfinder.gif" id="myPicture" style="width: 201px; height:155px" alt="Slideshow" /></p>
 
	<h1 align="center">
    <a href="javascript:processPrevious()">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="javascript:processNext()">Next &gt;&gt;</a></h1>
 
</body>
 
</html>

Même s'il n'est pas obligatoire, prends l'habitude de mettre un ; à la fin de chaque instruction.
J'ai remplacé les name par id.
J'ai inclu les propriétés des éléments dans l'attribut style.

**djedje37et28** · 08/09/2007, 00h28

bonjour auteur,
Tout d'abord un grand merci pour ta réponse, c'est exactement ce que je voulai faire.

J'ai juste quelques questions :
-peut on affecter à deux id différentes un même tableau dans le but éviter une "surconsommation des ressources"?
par exemple si je remet à un autre endroit un même prix ?
-Pour le lien ca ne fonctionne pas, ca ne me le changes pas.
je me disais que ca pourrait venir de

Code :

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

lien.href=lien[thisPic];

??
j'ai juste changé l 'id du lien ( lien2) sinon ca ne pourrait fonctionner:

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
60
61
62
63
64
65
66
67
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Image Slideshow</title>
	<script type="text/javascript" language="Javascript">
	<!-- Hide script from old browsers
 
    photos = new Array("images/pathfinder.gif","images/surveyor.gif","images/surveyor98.gif")
    modele = new Array("rouge","rechampi","noir")
    prix = new Array("729","323","696")
    lien= new Array("lien1.html","lien2.html","lien3.html")
    thisPic = 0
    total = photos.length - 1
 
    function processPrevious()
    {
     var px, md, lien, image;
     lien = document.getElementById("lien");
     md = document.getElementById("modele");
     px = document.getElementById("prix");
     image = document.getElementById("myPicture");
 
     if (thisPic > 0)
     {
	    thisPic--;
		image.src=photos[thisPic];
		lien.href=lien[thisPic];
		px.innerHTML = prix[thisPic];
		md.innerHTML = modele[thisPic];
     }
	}
 
    function processNext()
    {
     var px, md, lien, image;
     lien = document.getElementById("lien");
     md = document.getElementById("modele");
     px = document.getElementById("prix");
     image = document.getElementById("myPicture");
 
     if (thisPic < total)
     {
        thisPic++;
		image.src=photos[thisPic];
		lien.href=lien[thisPic];
		px.innerHTML = prix[thisPic];
		md.innerHTML = modele[thisPic];
     }
	}
 
	// End hiding script from old browsers -->
	</script>	
</head>
 
<body style="background-color:#FFFFFF">
 
<p><a href="lien1.html" id="lien">rouge</a></p>
	<p id="prix">729</p>
	<p id="modele">rouge</p>
	<p align="center"><img src="images/pathfinder.gif" id="myPicture" style="width: 201px; height:155px" alt="Slideshow" /></p>
 
	<h1 align="center">
    <a href="javascript:processPrevious()">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="javascript:processNext()">Next &gt;&gt;</a></h1>
 
</body>
 
</html>

je te remercie de ton aide!!!!!!!!!!!!

**djedje37et28** · 08/09/2007, 12h44

j ai essayé d'utiliser document.getElementsByTagName pour récupérer le lien mais ca ne fonctionne pas. Je comprend pas pourquoi le lien ne change pas, dans la déclaration il n'y a pas d'erreur!
Je continue de regarder!
un lien vers mon problème:
ici
merkiiiiiii

**Auteur** · 08/09/2007, 12h46

Envoyé par djedje37et28

-peut on affecter à deux id différentes un même tableau dans le but éviter une "surconsommation des ressources"?
par exemple si je remet à un autre endroit un même prix ?

euh.. je ne vois pas trop ce que tu veux faire

Envoyé par djedje37et28

-Pour le lien ca ne fonctionne pas, ca ne me le changes pas.
je me disais que ca pourrait venir de

Code :

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

lien.href=lien[thisPic];

??

oui effectivement, je n'ai pas fait attention

(ça ne vient pas de l'id de l'objet ciblé

)

Il y a le tableau lien[] et dans les fonctions la variable lien. Renomme une des deux variables :

Code html :

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
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Image Slideshow</title>
	<script type="text/javascript" language="Javascript">
        <!-- Hide script from old browsers
 
    var photos = new Array("images/pathfinder.gif","images/surveyor.gif","images/surveyor98.gif")
    var modele = new Array("rouge","rechampi","noir")
    var prix = new Array("729","323","696")
    var lien = new Array("lien1.html","lien2.html","lien3.html")
    var thisPic = 0
    var total = photos.length - 1
 
    function processPrevious()
    {
     var px, md, lienImg, image;
     lienImg = document.getElementById("lien");
     md = document.getElementById("modele");
     px = document.getElementById("prix");
     image = document.getElementById("myPicture");
 
     if (thisPic > 0)
     {
            thisPic--;
                image.src=photos[thisPic];
                lienImg.href=lien[thisPic];
                px.innerHTML = prix[thisPic];
                md.innerHTML = modele[thisPic];
     }
        }
 
    function processNext()
    {
     var px, md, lienImg, image;
     lienImg = document.getElementById("lien");
     md = document.getElementById("modele");
     px = document.getElementById("prix");
     image = document.getElementById("myPicture");
 
     if (thisPic < total)
     {
        thisPic++;
                image.src=photos[thisPic];
                lienImg.href=lien[thisPic];
                px.innerHTML = prix[thisPic];
                md.innerHTML = modele[thisPic];
     }
        }
 
        // End hiding script from old browsers -->
        </script>	
</head>
 
<body style="background-color:#FFFFFF">
 
<p><a href="lien1.html" id="lien">rouge</a></p>
	<p id="prix">729</p>
	<p id="modele">rouge</p>
	<p align="center"><img src="images/pathfinder.gif" id="myPicture" style="width: 201px; height:155px" alt="Slideshow" /></p>
 
	<h1 align="center">
    <a href="javascript:processPrevious()">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="javascript:processNext()">Next &gt;&gt;</a></h1>
 
</body>
 
</html>

**djedje37et28** · 08/09/2007, 12h58

merci ça fonctionne bien!!
Ce que je voulais dire c'est si il est possible d'utiliser deux fois le tableau prix pour l'afficher deux fois dans la page ?
mais j'ai trouvé, il s'agit juste d'ajouter une autre variable comme px2 qui ciblera sur une autre id.
merci, bon week end
jérôme

galerie suivant précedent avec texte, lien et image qui change

JavaScript

Discussions similaires

Partager

Partager