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

Invité · 08/05/2010, 09h58

Code :

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

<img id ='coucou' src ='d4g.jpg'>

j'ai mis une balise img a l'interieur il y a l'id qui est donc son identifiant et le src qui donne l'emplacement et le nom de l'image

Code :

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

document.getElementById('coucou').src=imageaaffiche

cette ligne fait appel a l'element qui a comme id 'coucou' dans l'exemple la balise img

pour afficher une autre image je modifie le src (chemin et nom) de l'image

**Alexandrebox** · 08/05/2010, 13h29

merci beaucoup pour ces informations.
j'ai compris

C'est normal que le curseur ne se transforme pas en doigt? Je pense qu'il y a pas moyen.

Invité · 08/05/2010, 17h14

aver cursor:pointer

Code :

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

1
2
3
4
<img src ='d1.jpg' style='cursor:pointer' onclick="change('d1g.jpg')">
<img src ='d2.jpg' style='cursor:pointer' onclick="change('d2g.jpg')">
<img src ='d3.jpg' style='cursor:pointer' onclick="change('d3g.jpg')">

**Alexandrebox** · 09/05/2010, 18h44

ça marche bien merci beaucoup

**Alexandrebox** · 15/05/2010, 10h11

Bonjour,

encore moi. J'essaie d'adpter la fonction autre chose :
J'aimerais que ce qui apparaît dans le div soit du texte et non d'image.
Expemple :

Je vais sur image1, je fais apparaitre le texte1, Je vais sur image2, je fais apparaitre le texte2 etc.

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' style='cursor:pointer' onclick="change('d1g.jpg')">
<img src ='d2.jpg' style='cursor:pointer' onclick="change('d2g.jpg')">
<img src ='d3.jpg' style='cursor:pointer' onclick="change('d3g.jpg')">
 
</body>
</html>

Merci pour votre aide.

Invité · 15/05/2010, 21h24

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(texteaafficher){
document.getElementById('coucou').firstChild.nodeValue=texteaafficher
}
</script>
</head>
<body>
<div id ='coucou'> blablabla</div>
<br>
<img src ='d1.jpg' style='cursor:pointer' onclick="change('coucou c'est moi')">
<img src ='d2.jpg' style='cursor:pointer' onclick="change('texte numero 2')">
<img src ='d3.jpg' style='cursor:pointer' onclick="change('texte numero 3')">
 
</body>
</html>

on peut aussi utiliser innerHTML

**Alexandrebox** · 17/05/2010, 10h50

ça marche

Génial. Merci beaucoup.

bonne journée

**Alexandrebox** · 11/07/2010, 20h42

J'essaie d'ajouter du php au code. Les informations proviennent d'une base de données. Voici ce que j'ai fait et qui ne marche pas encore. Pourriez-vous SVP me donner un coup de main ?

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
<!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(texteaafficher){
document.getElementById('coucou').firstChild.nodeValue=texteaafficher
}
</script>
</head>
 
 
<body>
 
<?php 
$texteIntro ='<strong><span class="red">Les pages du site.</span></strong><br /><br />
<strong>&quot;Explicaations</strong><br />vous permet de revenir &agrave; la page principale o&ugrave; se trouvent les boutons de navigation entre diff&eacute;rentes pages.<br /><br />';
 
echo 'div = "coucou" '. ($texteIntro).'</div>'; 
 
$req = mysql_query($requete);
while ($myRow = mysql_fetch_assoc($req)){
$link = $myRow['link'];
$texte = $myRow['texte'];
 
/*
Voici ce que que j'essaie d'afficher : Le texte doit être une variable et le link, le reste d'information à afficher
echo '<a href="visiteurs/page1.php"><img src="themes/images/icons/principal_ajout.jpg"  width="40" height="35" border="0" onmouseover="change($texte)" /></a><br /><br /> ';
*/
}
?>
 
</body>
</html>

D'avance, merci bcp

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

JavaScript

Discussions similaires

Partager

Partager