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

Version imprimable

07/05/2010, 22h28
Alexandrebox

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

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

quelque chose comme ca

Code:

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>

07/05/2010, 22h58
Alexandrebox

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

:)
07/05/2010, 23h00
Invité

1 tout a fait

2 c'est l'id de l'image qui sera modifié
07/05/2010, 23h15
Alexandrebox

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

Citation:

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

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

Citation:

<img src ='d1.jpg'onclick="change('d1g.jpg')">

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
07/05/2010, 23h43
Alexandrebox

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:ccool:
08/05/2010, 09h58
Invité

Code:

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

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
08/05/2010, 13h29
Alexandrebox

merci beaucoup pour ces informations.
j'ai compris :ccool:

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

aver cursor:pointer

Code:

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')">

09/05/2010, 18h44
Alexandrebox

ça marche bien merci beaucoup :lol:

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 :

Citation:

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

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. :)

Code:

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

17/05/2010, 10h50
Alexandrebox

ça marche :ccool:
Génial. Merci beaucoup.

bonne journée

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:

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