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

Version imprimable

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:

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">  </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()"><< Previous</a>  <a href="javascript:processNext()">Next >></a></h1> </body> </html>
Le problème c est que mon

Code:

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!

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:

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.

bonjour auteur,
Tout d'abord un grand merci pour ta réponse, c'est exactement ce que je voulai faire.:king:
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:

lien.href=lien[thisPic];

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

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

08/09/2007, 12h44
djedje37et28

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
:D

Citation:

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 :oops:

Citation:

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:

lien.href=lien[thisPic];

oui effectivement, je n'ai pas fait attention :oops: (ç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:

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>

08/09/2007, 12h58
djedje37et28

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