Visionneuse d'images html, javascript, dreamweaver

**pxline** · 27/04/2013, 22h18

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

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

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

**NoSmoking** · 27/04/2013, 23h00

Bonsoir,
une ID DoIT être UNIQUE

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

Code :

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

1
2
3
function afficherphoto( id_image, nomphoto){
  document.getElementById( id_image).src = nomphoto;
}

avec un appel de la sorte

Code html :

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

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

**pxline** · 27/04/2013, 23h10

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

**NoSmoking** · 27/04/2013, 23h14

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

**pxline** · 27/04/2013, 23h27

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

Code html :

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

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>

**NoSmoking** · 27/04/2013, 23h33

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

Code html :

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

<img src="Images Index/nomade1petit.gif"...onclick="afficherphoto('grandephoto','Images Index/nomade1grand.gif')"/>

**pxline** · 27/04/2013, 23h44

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

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

1
2
3
<div id="projet2">
    <div id="grandephoto2">
    <img src="Images Index/stage1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />

**NoSmoking** · 27/04/2013, 23h47

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

OUI

une ID DoIT être UNIQUE

**pxline** · 27/04/2013, 23h55

Alleluia, tout s'éclaire

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

Visionneuse d'images html, javascript, dreamweaver

JavaScript

Discussions similaires

Partager

Partager