On click sur une vignette et afficher l'image correspondante dans un div

**Alexandrebox** · 07/05/2010, 22h28

Bonsoir les amis,
Je cherche à faire quelque chose de tout simple sans me prendre des open source de galérie photos

Voici ce que j'aimerais faire est sur cette page. Mais j'aimerais le faire en cliquant sur la vignette pour afficher la photo.
http://www.dynamicdrive.com/style/cs...gallery/#thumb
Par défaut, il y a une photo principale qui sera remplacer lorsque l'on clique sur une vignette.

Qui peut m'aider ?

D'avance merci beaucoup

Invité · 07/05/2010, 22h51

quelque chose comme ca

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
 
 function change(imageaaffiche){
document.getElementById('coucou').src=imageaaffiche
}
</script>
</head>
<body>
<img id ='coucou' src ='d4g.jpg'>
<br>
<img src ='d1.jpg'onmouseover="change('d1g.jpg')">
<img src ='d2.jpg'onmouseover="change('d2g.jpg')">
<img src ='d3.jpg'onmouseover="change('d3g.jpg')">
 
</body>
</html>

**Alexandrebox** · 07/05/2010, 22h58

Merci beaucoup pour ta réponse.
J'ai 2 petites questions :
1. Je cherche à afficher l'image en cliquant sur la vignette. Donc je suppose que je dois faire onclick

2. J'aimerais savoir : 'coucou' c'est quoi? le titre de l'image ?

Merci beaucoup

Invité · 07/05/2010, 23h00

1 tout a fait

2 c'est l'id de l'image qui sera modifié

**Alexandrebox** · 07/05/2010, 23h15

Ton code me convient parfaitement. propre et bien fait.
Mais je suis débutant en javascript. Je connais du php.
Je ne comprends pas.

Ce id c'est quoi? un id du css? qui montre comment afficher l'image?

Je suppose que src='d1.jpg' est le chemin vers la vignette, donc on click sur cette vignette => change('d1g.jpg') est le chemin de la photo.

Il me reste juste l'histoire de coucou

Merci beaucoup

**Alexandrebox** · 07/05/2010, 23h43

J'ai testé le code : il marche comme sur les roulettes.
Quelqu'un pourra m'expliquer le code s'il vous plaît ? J'aimerais apprendre.

Merci

On click sur une vignette et afficher l'image correspondante dans un div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager