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

Version imprimable

20/10/2011, 19h22
Alban 56

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

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
20/10/2011, 20h02
Bovino

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.
20/10/2011, 23h00
oceane751

effectivement c'est pas très précis...
aurais tu une url à proposer?
20/10/2011, 23h17
Alban 56

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. :(
21/10/2011, 04h18
Invité

Bonjour,
JavaScript !
-> Vignettes + image agrandie sur la même page
21/10/2011, 09h58
oceane751

ou en jquery..
21/10/2011, 10h53
Alban 56

Citation:

Envoyé par jreaux62

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

Très bon début, merci::ccool:

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

Je n'ai pas vu de coordonnées dans le script.
25/10/2011, 14h36
oceane751

en jquery tu peux faire des trucs stylés!
jquery sur google
25/10/2011, 19h48
NoSmoking

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:

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

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:

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>

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

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

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>

28/10/2011, 17h33
Alban 56

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.
29/10/2011, 10h17
Invité

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

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:

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

29/10/2011, 15h41
Alban 56

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 :mouarf:) trouver des boutons plus chouettes sera simple.

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:

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

29/10/2011, 17h18
Alban 56

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

Cordialement,
Alban
29/10/2011, 17h55
NoSmoking

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.
29/10/2011, 18h55
Invité

Citation:

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. :ccool: Je confirme. ;)
31/10/2011, 20h35
Alban 56

Alors un grand merci aussi à jreaux62 pour son aide. :ccool:

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. :oops:
31/10/2011, 23h07
NoSmoking
dans l'exemple que je te mis un simple ajout de
Code:

1 2 3 button:hover{ background-color : #e0e0e0; /* par exemple */ }
dans la partie style devrait suffire.

J'ai dû me planter quelque part parce que cela m'a placé mes boutons dans un rectangle, que la couleur ne change pas au passage de la souris, et que ma mise en page est complètement décalée.

Une partie du code modifié:
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 <!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 : 1200px; } #div_bouton { button over{ backgroud-color : #e0e0e0; / * par exemple * / ) width : 250px; float : left; text-align : center; } #div_image { width : 500px; height : 700px; float : left; border : 1px solid #e0e0e0; box-shadow: 1px 1px 20px #333;

Citation:
Code:

1 2 3 4 #div_bouton { button over{ backgroud-color : #e0e0e0; / * par exemple * / )
n'est pas correct
Code:

1 2 3 4 5 6 7 8 #div_bouton { width : 150px; float : left; text-align : center; } button:hover{ background-color : #e0e0e0; /* par exemple */ }
voila la bonne syntaxe

Ce que tu peux également faire est de jouer avec le background-image, dans ce cas on est, et reste, en pur CSS.

02/11/2011, 15h50
Alban 56

Mes boutons sont toujours inscrits dans un cadre rectangulaire mais cette fois ci la lisière des cadres change de couleur au passage de la souris mais pas les boutons. Et mes boutons sont bien disposés verticalement mais au-dessus de l'image centrale.

Les boutons ne changeront pas de couleur, surtout si il s'agit d'image.

Il te faut sûrement envisager la 2éme solution, celle des background-image, ci joint un petit exemple pour voir le principe
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 33 34 35 36 37 38 <!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[Que du CSS...]</title> <style type="text/css"> button{ border : 0; padding : 0; margin : 0; background-color : transparent; cursor : pointer; } button{ background-image : url(http://www.developpez.net/template/images/logo.gif); background-repeat : no-repeat; width : 109px; height : 45px; } #btn1{ background-position : 0px 0px; } #btn1:hover{ background-position : 0px -45px; } #btn2{ background-position : -109px 0px; } #btn2:hover{ background-position : -109px -45px; } </style> </head> <body> <img src="http://www.developpez.net/template/images/logo.gif" title="Developpez" alt="Developpez"> <br><button id="btn1"></button><button id="btn2"></button> </body> </html>
Citation:

Et mes boutons sont bien disposés verticalement mais au-dessus de l'image centrale.

là je dirais que le conteneur n'est pas assez large pour contenir sur la même ligne ET les boutons ET l'image.

03/11/2011, 10h33
Alban 56

Je ne m'en sors pas, tant pis mes boutons vont rester monochromes.

Pour la résolution écran vous avez une idée ?
03/11/2011, 19h35
NoSmoking

Citation:

Envoyé par Alban 56

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.

il faudrait que tu nous montres HTML le code car généralement c'est l'inverse qui se produit

Citation:

Envoyé par Alban 56

Y a-t-il un moyen que ce scripte impose la résolution 1280x1024 à l'ordinateur ?

Heureusement que NON!...mais tu peux fixer un conteneur fixe pour ta page.

Voici l'ensemble du scripte + URL des boutons 2 couleurs (normaux et passage souris) + URL des images

Je n'ai pas intégré la modif des boutons 2 couleurs elle ne fonctionne pas.

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
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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 : 1200px;
}
#div_bouton {
  width : 250px;
  float : left;
  text-align : center;
}
#div_image {
  width : 500px;
  height : 700px;
  float : left;
  border : 1px solid #e0e0e0;
  box-shadow: 1px 1px 20px #333;
}
#image_grande {
  width : 500px;
  height : 700px;
}
button{
  border : 0;
  padding : 0;
  margin : 0;
  background-color : transparent;
  cursor : pointer;
}
</style>
<script type="text/javascript">
var picture = [
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_12.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_13.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_14.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_15.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_16.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_17.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></h1>
  <div id="div_bouton">
    <br><br><br><button onclick="showImage(0);"><img alt="" src="http://i45.servimg.com/u/f45/11/05/13/65/button41.jpg"></button>
    <br><br><button onclick="showImage(1);"><img alt="" src="http://i45.servimg.com/u/f45/11/05/13/65/button43.jpg"></button>
    <br><br><button onclick="showImage(2);"><img alt="" src="http://i45.servimg.com/u/f45/11/05/13/65/button45.jpg"></button>
    <br><br><button onclick="showImage(3);"><img alt="" src="http://i45.servimg.com/u/f45/11/05/13/65/button47.jpg"></button>
    <br><br><button onclick="showImage(4);"><img alt="" src="http://i45.servimg.com/u/f45/11/05/13/65/button49.jpg"></button>
    <br><br><button onclick="showImage(5);"><img alt="" src="http://i45.servimg.com/u/f45/11/05/13/65/button51.jpg"></button>
 
    <br>
  </div>
  <div id="div_image">
    <img id="image_grande" src="..." alt="">
  </div>
</div>
</body></html>
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
BOUTONS
 
http://i45.servimg.com/u/f45/11/05/13/65/button41.jpg Normal
http://i45.servimg.com/u/f45/11/05/13/65/button42.jpg Passage souris
 
http://i45.servimg.com/u/f45/11/05/13/65/button43.jpg
http://i45.servimg.com/u/f45/11/05/13/65/button44.jpg
 
http://i45.servimg.com/u/f45/11/05/13/65/button45.jpg
http://i45.servimg.com/u/f45/11/05/13/65/button46.jpg
 
http://i45.servimg.com/u/f45/11/05/13/65/button47.jpg
http://i45.servimg.com/u/f45/11/05/13/65/button48.jpg
 
http://i45.servimg.com/u/f45/11/05/13/65/button49.jpg
http://i45.servimg.com/u/f45/11/05/13/65/button50.jpg
 
http://i45.servimg.com/u/f45/11/05/13/65/button51.jpg
http://i45.servimg.com/u/f45/11/05/13/65/button52.jpg
 
IMAGES
http://i45.servimg.com/u/f45/11/05/13/65/diapo_12.jpg
http://i45.servimg.com/u/f45/11/05/13/65/diapo_13.jpg
http://i45.servimg.com/u/f45/11/05/13/65/diapo_14.jpg
http://i45.servimg.com/u/f45/11/05/13/65/diapo_15.jpg
http://i45.servimg.com/u/f45/11/05/13/65/diapo_16.jpg
http://i45.servimg.com/u/f45/11/05/13/65/diapo_17.jpg
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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
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
<!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:1200px;
}
#div_bouton {
  width:250px;
  float:left;
  text-align:center;
}
#div_bouton p {
  margin:10px auto;
  text-align:center;
}
 
#div_image {
  width:500px;
  height:700px;
  float:left;
  border:1px solid #e0e0e0;
  box-shadow: 1px 1px 20px #333;
}
#image_grande {
  width:500px;
  height:700px;
}
 
button{
  border:0; padding:0; margin:0;
  width:160px; height:30px; /* dimensions des boutons (meme que image de fond) */
  font-weight:bold; font-size:1.2em; font-style:italic; /* texte des boutons */
  padding-top:5px; /* centrage vertical des textes */
  background: url(http://i45.servimg.com/u/f45/11/05/13/65/button41.jpg) center no-repeat; /* image de fond des boutons */
  cursor:pointer;
}
button:hover {
  background: url(http://i45.servimg.com/u/f45/11/05/13/65/button42.jpg) center no-repeat; /* image de fond des boutons (hover) */
}
</style>
<script type="text/javascript">
var picture = [
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_12.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_13.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_14.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_15.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_16.jpg',
  'http://i45.servimg.com/u/f45/11/05/13/65/diapo_17.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>test</h1>
  <div id="div_bouton">
    <p><button onclick="showImage(0);">Diaporama n°1</button></p>
    <p><button onclick="showImage(1);">Diaporama n°2</button></p>
    <p><button onclick="showImage(2);">Diaporama n°3</button></p>
    <p><button onclick="showImage(3);">Diaporama n°4</button></p>
    <p><button onclick="showImage(4);">Diaporama n°5</button></p>
    <p><button onclick="showImage(5);">Diaporama n°6</button></p>
  </div>
  <div id="div_image">
    <img id="image_grande" src="..." alt="" />
  </div>
</div>
</body></html>

Il faut juste remplacer les 2 images (button41.jpg et button42.jpg) => par des images SANS TEXTE.

04/11/2011, 17h22
Alban 56

Ce scripte est tout à fait génial, plus la peine de créer un bouton spécifique, il suffit de changer le texte de ce bouton dans le scripte. :ccool:

Un très grand merci jreaux62 pour cette astuce, pour ton aide, et ta patience.
Merci aussi à NoSmoking.