Visionneuse d'images html, javascript, dreamweaver

Version imprimable

Bonjour,

Je suis ultra novice en html, javascript, dreamweaver...

J'ai créé plusieurs visionneuses d'images en javascript sur la même page. Tout fonctionne correctement pour la première.
Mon souci : lorsque je clic sur une vignette de la seconde visionneuse, l'image apparait dans la première visionneuse... ce qui ne correspond pas à l'effet souhaité !

Quelle est mon erreur ? Quelqu'un peut-il m'aider ?
Merci de votre précieuse aide

Voici le script :

Code:

1
2
3
4
5
6
7
8
<head>
<script>
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
</script>
</head>

Les visionneuses se répètent de la même façon que suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</div>
<div id="projets">
<div id="projet1">
<div id="grandephoto1">
<img src="Images Index/nomade1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
</div>
<div id="petitephoto1">
<img src="Images Index/nomade1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/nomade1grand.gif')"/>
<img src="Images Index/nomade2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('Images Index/nomade2grand.gif')"/>
<img src="Images Index/nomade3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('Images Index/nomade3grand.gif')"/>
</div>
</div>
 
<div id="projet2">
<div id="grandephoto2">
<img src="Images Index/stage1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
</div>
<div id="petitephoto2">
<img src="Images Index/stage1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/stage1grand.gif')"/>
<img src="Images Index/stage2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('Images Index/stage2grand.gif')"/>
<img src="Images Index/stage3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('Images Index/stage3grand.gif')"/>
</div>
</div>

27/04/2013, 23h00
NoSmoking
Bonsoir,
une ID DoIT être UNIQUE

Il te faut cibler l'image à modifier en passant en paramètre l'ID de celle ci
Code:

1 2 3 function afficherphoto( id_image, nomphoto){ document.getElementById( id_image).src = nomphoto; }
avec un appel de la sorte

Code:

<img src="Images Index/stage1petit.gif" width="50" height="50" id="vignette1" onclick="afficherphoto( 'id_image', 'Images Index/stage1grand.gif')"/>
27/04/2013, 23h10
pxline

J'ai essayé avec ce que tu m'as proposé, mais je n'y parviens toujours pas...
Avec cette nouvelle fonction, la première visionneuse ne fonctionne plus.
Je ne comprend pas ce qui ne fonctionne pas :cry:
27/04/2013, 23h14
NoSmoking

c'est TOUS les appels à la fonction qui doivent être modifiés dans toutes tes balises IMG.

Désolée si mes questions sont stupides, mais pour la première visionneuse ça donnerait ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
</div>
<div id="projets">
<div id="projet1">
<div id="grandephoto1">
<img src="Images Index/nomade1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
</div>
<div id="petitephoto1">
<img src="Images Index/nomade1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('id_image','Images Index/nomade1grand.gif')"/>
<img src="Images Index/nomade2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('id_image','Images Index/nomade2grand.gif')"/>
<img src="Images Index/nomade3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('id_image','Images Index/nomade3grand.gif')"/>
</div>
</div>

27/04/2013, 23h33
NoSmoking

Non quand même il te faut mettre la vrai id_image en paramètre

Code:

<img src="Images Index/nomade1petit.gif"...onclick="afficherphoto('grandephoto','Images Index/nomade1grand.gif')"/>
27/04/2013, 23h44
pxline
Okay, déjà ça remarche pour la première visionneuse.

pour la seconde du coup il faut que je donne un id différent ? car en ce moment c'est le même que pour le 1er (id="grandephoto")...
Code:

1 2 3 <div id="projet2"> <div id="grandephoto2"> <img src="Images Index/stage1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
27/04/2013, 23h47
NoSmoking

Citation:

pour la seconde du coup il faut que je donne un id différent ?

OUI

Citation:

une ID DoIT être UNIQUE
27/04/2013, 23h55
pxline

Alleluia, tout s'éclaire :D

Je viens de comprendre pourquoi toutes mes précédentes tentatives étaient vaines ! Je mettais l'id des balises div en id de mes images...
Mais comme tu l'as si bien dit (2 fois) un id est unique.

Je ne pensais pas voir le bout du tunnel.

Merci énormément, ton aide me sauve la vie :ccool: