Image affichée à un endroit précis par clic sur un bouton

**Alban 56** · 20/10/2011, 19h22

Bonjour à toutes et à tous,

En HTML
je voudrais pouvoir afficher une image à un endroit précis quand je clique sur un bouton.

D'avance merci pour votre aide,
Cordialement,
Alban

**Bovino** · 20/10/2011, 20h02

Ben... c'est pas très précis comme question, donc tu auras difficilement des réponses précises.

Toujours est-il que tu ne pourras probablement pas faire ce que tu veux en HTML mais il te faudra probablement un brin de JavaScript.

L'idée est de mettre ton image en position absolute que tu positionnes où tu veux dans ta page, il te reste ensuite, au clic du bouton, à afficher ton image.

**oceane751** · 20/10/2011, 23h00

effectivement c'est pas très précis...
aurais tu une url à proposer?

**Alban 56** · 20/10/2011, 23h17

L'idée ce serait d'avoir une série de boutons disposés verticalement sur la partie gauche de la page et qu'en cliquant sur un de ces boutons l'image correspondante viendrait s'afficher dans la partie centrale de la page.
Chaque bouton commandant une image différente venant se positionner dans cette même partie centrale.

Mais je n'ai pas la moindre idée de la façon de m'y prendre.

Invité · 21/10/2011, 04h18

Bonjour,
JavaScript !
-> Vignettes + image agrandie sur la même page

**oceane751** · 21/10/2011, 09h58

ou en jquery..

**Alban 56** · 21/10/2011, 10h53

Envoyé par jreaux62

Bonjour,
JavaScript !
-> Vignettes + image agrandie sur la même page

Très bon début, merci:

Comment faire pour afficher les vignettes sur la gauche de l'image centrale ?

Je n'ai pas vu de coordonnées dans le script.

**oceane751** · 25/10/2011, 14h36

en jquery tu peux faire des trucs stylés!
jquery sur google

**NoSmoking** · 25/10/2011, 19h48

Bonsoir,
dans le principe il te suffit d'avoir un conteneur image, balise img donc, dont tu modifies l'attribut src sur le click de tes boutons.

Cette balise image peut être placé où tu veux sur ta page, point besoin de beaucoup de code juste

Code :

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

document.getElementById('id_image').src = 'nom_image.ext';

**Alban 56** · 28/10/2011, 08h40

Bonjour NoSmoking et merci pour votre aide,

J'ai déjà bien du mal à programmer en HTML mais en JavaScript je suis nul, alors je ne sais pas ce que je dois mettre en (id_image) et en 'nom_image.ext' pour pouvoir placer mes boutons verticalement à gauche de l'image centrale.

Voici le code d'un essai que j'ai réalisé:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<body><!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.lesite.com
*/
/******
DEFINITION DES VARIABLE DU SCRIPT
******/
nb_photo_ligne = 8;
numero_photo = 1;
 
/******
ENREGISTREMENT DES PHOTOS
******/
ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;
 
var HazMess=new Array();
	ejs_des[0]= ''
	ejs_vignet[0]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m10.png'
	ejs_big[0]= 'http://i65.servimg.com/u/f65/11/05/13/65/clisso10.jpg'
	ejs_des[1]= ''
	ejs_vignet[1]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m11.png'
	ejs_big[1]= 'http://i65.servimg.com/u/f65/11/05/13/65/clisso11.jpg'
	ejs_des[2]= ''
	ejs_vignet[2]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m12.png'
	ejs_big[2]= 'http://i65.servimg.com/u/f65/11/05/13/65/clisso12.jpg'
	ejs_des[3]= ''
	ejs_vignet[3]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m13.png'
	ejs_big[3]= 'http://i65.servimg.com/u/f65/11/05/13/65/clisso13.jpg'
	ejs_des[4]= ''
	ejs_vignet[4]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m14.png'
	ejs_big[4]= 'http://i65.servimg.com/u/f65/11/05/13/65/clisso14.jpg'
	ejs_des[5]= ''
	ejs_vignet[5]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m15.png'
	ejs_big[5]= 'http://i65.servimg.com/u/f65/11/05/13/65/clisso15.jpg'
	ejs_des[6]= ''
	ejs_vignet[6]= 'http://i45.servimg.com/u/f45/11/05/13/65/site_m16.png'
	ejs_big[6]= 'http://i45.servimg.com/u/f45/11/05/13/65/feniou10.jpg'
 
 
/******
FONCTION POUR CHANGER LES PHOTOS
******/
function ChageImage(num)
	{
	if(document.getElementById)
		document.getElementById("ejs_dyn_img").innerHTML = '<A HREF="javascript:killImage()"><IMG SRC="'+ejs_big[num]+'" BORDER=0 HSPACE=5 VSPACE=5 ALT="Cliquez ici pour faire disparaitre"></A><BR><FONT FACE="Verdana, Arial" SIZE=1>'+ejs_des[num]+'</FONT>';
	else
		window.open(ejs_big[num],"_blank")
	}
 
/******
FONCTION POUR EFFACER LES PHOTOS
******/
function killImage(num)
	{
	if(document.getElementById)
		document.getElementById("ejs_dyn_img").innerHTML = "";
	}
 
 
/******
CREATION DU TABLEAU
******/
document.write('<TABLE>')
for(a=0;a<ejs_big.length;a++)
	{
	if(numero_photo == 1)
		document.write('<TR>');
	if(numero_photo == ejs_big.length)
		document.write('<TD ALIGN=center COLSPAN='+(((ejs_big.length)+1)-numero_photo)+'>');
	else
		document.write('<TD ALIGN=center>');
	document.write('<A HREF="javascript:ChageImage('+a+')"><IMG SRC="'+ejs_vignet[a]+'" HSPACE=5 VSPACE=5 ALT="Cliquez ici pour voir en grand" BORDER=0></A></TD>')
if(numero_photo == nb_photo_ligne)
		{
		document.write('</TR>');
		numero_photo=0;
		}
	numero_photo++;
	}
document.write('<TR><TD COLSPAN='+ejs_big.length+' ALIGN=center><DIV ID=ejs_dyn_img></DIV></TD></TR></TABLE>');
</SCRIPT><noscript><a href="http://www.lesite.com/mycircle/">echange de lien</a></noscript></body>

Invité · 28/10/2011, 12h29

Bonjour,
voici un petit script, très simple :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>test</title>
	<script type="text/javascript">
	/* fonction : affichage d'une image dans un div */
	function ChangeImage(divId,imageNom){
		var divId; /* id du div qui va contenir la grande image */
		var imageNom; /* nom de la grande image */
		var imageRep = './dossier-images/'; /* repertoire contenant les images (pour ne pas avoir à l'écrire à chaque fois dans la fonction */
		/* on met l'image dans le div */
		var contenuhtml = '<img src="'+imageRep+imageNom+'" alt="" onclick="ViderDiv(\'div-photo\');" />';
		document.getElementById(divId).innerHTML = contenuhtml;
	}	
	/* fonction : vidage du contenu d'un div */
	function ViderDiv(divId){
		var divId; /* id du div à vider */
		/* on vide le div */
		document.getElementById(divId).innerHTML = '';
	}	
	</script>
	<style type="text/css">
	#div-pictos 		 { position:relative; float:left; width:60px; }
	#div-pictos ul		  { margin:0; padding:0; }
	#div-pictos ul li 	{ list-style-type:none; list-style-position:outside; margin:0 0 5px 0; padding:0; }
	#div-pictos ul li img 	{ border:5px solid #ccc; width:40px; height:40px; } /* pictos*/
	#div-photo 		{ position:relative; float:left; width:500px; }
	#div-photo img 	 	{ border:5px solid #ccc; width:480px; } /* grande image */
	</style>
 
</head>
<body>
	<div id="div-pictos">
	<ul>
		<li>
			<img src="./dossier-images/picto-01.jpg" onclick="ChangeImage('div-photo','photo-01.jpg');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-02.jpg" onclick="ChangeImage('div-photo','photo-02.jpg');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-03.jpg" onclick="ChangeImage('div-photo','photo-03.jpg');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-04.jpg" onclick="ChangeImage('div-photo','photo-04.jpg');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-05.jpg" onclick="ChangeImage('div-photo','photo-05.jpg');" alt="" />
		</li>
	</ul>
	</div>
 
	<div id="div-photo">
	</div>
 
</body>
</html>

ChangeImage() permet de changer l'affichage de la grande image ("onclick" sur la miniature).
ViderDiv() vide le div (on peut très bien s'en passer !).

En voici un autre, avec affichage d'un petit texte sous l'image :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>test</title>
	<script type="text/javascript">
	/* fonction : affichage d'une image dans un div */
	function ChangeImageTxt(divId,imageNom,imgTexte){
		var divId; /* id du div qui va contenir la grande image */
		var imageNom; /* nom de la grande image */
		var imgTexte; /* texte sous la grande image */
		var imageRep = './dossier-images/'; /* repertoire contenant les images (pour ne pas avoir à l'écrire à chaque fois dans la fonction */
		/* on met l'image dans le div */
		var contenuhtml = '<img src="'+imageRep+imageNom+'" alt="" onclick="ViderDiv(\'div-photo\');" />';
		contenuhtml += '<p>'+imgTexte+'</p>';
		document.getElementById(divId).innerHTML = contenuhtml;
	}	
	/* fonction : vidage du contenu d'un div */
	function ViderDiv(divId){
		var divId; /* id du div à vider */
		/* on vide le div */
		document.getElementById(divId).innerHTML = '';
	}	
	</script>
	<style type="text/css">
	#div-pictos 			{ position:relative; float:left; width:60px; }
	#div-pictos ul	 		{ margin:0; padding:0; }
	#div-pictos ul li 		{ list-style-type:none; list-style-position:outside; margin:0 0 5px 0; padding:0; }
	#div-pictos ul li img 	{ border:5px solid #ccc; width:40px; height:40px; } /* pictos*/
	#div-photo 				{ position:relative; float:left; width:500px; }
	#div-photo img 			{ border:5px solid #ccc; width:480px; } /* grande image */
	#div-photo p 			{ width:480px; margin:5px auto; text-align:center; } /* texte sous la grande image */
	</style>
 
</head>
<body>
	<div id="div-pictos">
	<ul>
		<li>
			<img src="./dossier-images/picto-01.jpg" onclick="ChangeImageTxt('div-photo','photo-01.jpg','Coucou, c\'est moi !');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-02.jpg" onclick="ChangeImageTxt('div-photo','photo-02.jpg','Caca, c\'est mou !');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-03.jpg" onclick="ChangeImageTxt('div-photo','photo-03.jpg','Bouh, le vilain !');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-04.jpg" onclick="ChangeImageTxt('div-photo','photo-04.jpg','L\'été est là !');" alt="" />
		</li>
		<li>
			<img src="./dossier-images/picto-05.jpg" onclick="ChangeImageTxt('div-photo','photo-05.jpg','Viva la vita !');" alt="" />
		</li>
	</ul>
	</div>
 
	<div id="div-photo">
	</div>
 
</body>
</html>

**Alban 56** · 28/10/2011, 17h33

Merci jreaux62 pour tes codes mais celui que j'ai affiché me conviendrait parfaitement s'il était possible d'avoir les boutons à gauche de l'image centrale. Avec ceux que tu m'as proposés je m'arrive pas à ce résultat.

Invité · 29/10/2011, 10h17

Mes 2 scripts ci-dessus fonctionnent très bien, et ont l'avantage d'être très simples.
Le positionnement des éléments se fait grâce au CSS (que j'ai aussi fourni !).
Et j'ai mis suffisamment de commentaires pour que tu puisses comprendre le JavaScript facilement.

Dans ton cas, je ne vois qu'une solution : apprendre les bases.
- Les meilleurs cours et tutoriels (X)HTML
- Div et CSS : une mise en page rapide et facile
- Les tableaux (XHTML & CSS)
- Introduction au JavaScript

**NoSmoking** · 29/10/2011, 11h24

il te faut observer le code généré par le document.write(...) pour comprendre où sont les changements à faire.

Remarques
- le temps que tu passes à essayer de trouver une solution satisfaisante à partir de ce script, viellot, passes le à écrire ton code HTML, avec des copier/coller cela va assez vite, la preuve...

Code html :

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

1
2
3
4
5
6
7
<br><a href="javascript:ChageImage(0)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m10.png"></a>
<br><a href="javascript:ChageImage(1)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m11.png"></a>
<br><a href="javascript:ChageImage(2)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m12.png"></a>
<br><a href="javascript:ChageImage(3)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m13.png"></a>
<br><a href="javascript:ChageImage(4)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m14.png"></a>
<br><a href="javascript:ChageImage(5)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m15.png"></a>
<br><a href="javascript:ChageImage(6)"><img hspace="5" border="0" vspace="5" alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m16.png"></a>

- les balises BUTTON, avec un peut de style aurait un rendu à mon sens plus mieux...

**Alban 56** · 29/10/2011, 15h41

Je ne comprends pas comment intervenir dans le document.write

Les boutons s'affichent bien verticalement, mais je ne vois pas comment procéder pour les images centrales.

Les boutons ainsi que les images sont les premiers et premières qui me sont tombés sous la main, une fois le script au point (si j'y arrive

) trouver des boutons plus chouettes sera simple.

**NoSmoking** · 29/10/2011, 15h57

document.write écrit dans le document ce qui est passé en paramètre ni plus ni moins...attention néanmoins à son utilisation sur des documents chargés, il remplace dans ce cas le contenu, mais là n'est pas le propos.

Voici un exemple simple de ce que cela pourrait être

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
#page{
  margin : auto;
  width : 800px;
}
#div_bouton {
  width : 150px;
  float : left;
  text-align : center;
}
#div_image {
  width : 600px;
  height : 800px;
  float : left;
  border : 1px solid #e0e0e0;
  box-shadow: 1px 1px 20px #333;
}
#image_grande {
  width : 600px;
  height : 800px;
}
button{
  border : 0;
  padding : 0;
  margin : 0;
  background-color : transparent;
  cursor : pointer;
}
</style>
<script type="text/javascript">
var picture = [
  'http://i65.servimg.com/u/f65/11/05/13/65/clisso10.jpg',
  'http://i65.servimg.com/u/f65/11/05/13/65/clisso11.jpg',
  'http://i65.servimg.com/u/f65/11/05/13/65/clisso12.jpg',
  'http://i65.servimg.com/u/f65/11/05/13/65/clisso13.jpg',
  'http://i65.servimg.com/u/f65/11/05/13/65/clisso14.jpg',
  'http://i65.servimg.com/u/f65/11/05/13/65/clisso15.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/feniou10.jpg'
];
var maxPict = picture.length;
 
function showImage( num){
  var oImg = document.getElementById('image_grande');
  if( num < maxPict){
    oImg.src = picture[num];
  }
}
window.onload = function(){
  showImage(0);
};
</script>
</head><body>
<div id="page">
  <h1>Galerie Photos...</h1>
  <div id="div_bouton">
    <br><button onclick="showImage(0);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m10.png"></button>
    <br><button onclick="showImage(1);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m11.png"></button>
    <br><button onclick="showImage(2);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m12.png"></button>
    <br><button onclick="showImage(3);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m13.png"></button>
    <br><button onclick="showImage(4);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m14.png"></button>
    <br><button onclick="showImage(5);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m15.png"></button>
    <br><button onclick="showImage(6);"><img alt="Cliquez ici pour voir en grand" src="http://i45.servimg.com/u/f45/11/05/13/65/site_m16.png"></button>
    <br>
  </div>
  <div id="div_image">
    <img id="image_grande" src="..." alt="">
  </div>
</div>
</body></html>

peu de script et pas mal de copier-coller

**Alban 56** · 29/10/2011, 17h18

IMPECCABLE ! c'est exactement ce que j'espérais obtenir, un grand merci à toi NoSmoking pour le temps que tu m'as consacré et pour ta patience.

Cordialement,
Alban

**NoSmoking** · 29/10/2011, 17h55

Heureux que cela te plaise.

Mais entre ce que t'a mis jreaux62 et le code de ce que je t'ai fourni, tu avais tout pour y arrivé, les structures de fichier sont identiques si on y regarde de plus prêt.

Invité · 29/10/2011, 18h55

Envoyé par NoSmoking

Mais entre ce que t'a mis jreaux62 et le code de ce que je t'ai fourni, tu avais tout pour y arrivé, les structures de fichier sont identiques si on y regarde de plus prêt.

Merci NoSmoking.

Je confirme.

**Alban 56** · 31/10/2011, 20h35

Alors un grand merci aussi à jreaux62 pour son aide.

Je viens de m'apercevoir d'un problème, en résolution 1280x1024 ce scripte fonctionne parfaitement; mais sur un autre ordinateur en résolution 1776x1000 les boutons chevauchent l'image centrale.
Y a-t-il un moyen que ce scripte impose la résolution 1280x1024 à l'ordinateur ?

Petite question y a-t-il un moyen sur ce script de mettre des boutons qui changent de couleur lorsque l'on passe la souris dessus ?

Oui je sais je suis ch*ant mais à mon âge ça va être dur de me faire changer.

Image affichée à un endroit précis par clic sur un bouton

JavaScript

Discussions similaires

Partager

Partager