Image affichée à un endroit précis par clic sur un bouton [Résolu]

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.

jreaux62 · 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

Citation:

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>

jreaux62 · 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.

jreaux62 · 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.

jreaux62 · 29/10/2011, 18h55

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.

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.

20/10/2011, 19h22	#1
Alban 56 Invité régulier Inscription : novembre 2008 Messages : 46 Détails du profil Informations forums : Inscription : novembre 2008 Messages : 46 Points : 6 Points : 6	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
	00

20/10/2011, 20h02	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 793 Points : 35 793	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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

21/10/2011, 04h18	#5
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, JavaScript ! -> Vignettes + image agrandie sur la même page __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	10

29/10/2011, 10h17	#13
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	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 __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

20/10/2011, 23h00	#3
oceane751 Membre éprouvé Intégrateur Web Inscription : novembre 2004 Messages : 992 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Intégrateur Web Informations forums : Inscription : novembre 2004 Messages : 992 Points : 434 Points : 434	effectivement c'est pas très précis... aurais tu une url à proposer?
	00

20/10/2011, 23h17	#4
Alban 56 Invité régulier Inscription : novembre 2008 Messages : 46 Détails du profil Informations forums : Inscription : novembre 2008 Messages : 46 Points : 6 Points : 6	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.
	00

21/10/2011, 09h58	#6
oceane751 Membre éprouvé Intégrateur Web Inscription : novembre 2004 Messages : 992 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Intégrateur Web Informations forums : Inscription : novembre 2004 Messages : 992 Points : 434 Points : 434	ou en jquery..
	00

25/10/2011, 14h36	#8
oceane751 Membre éprouvé Intégrateur Web Inscription : novembre 2004 Messages : 992 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Intégrateur Web Informations forums : Inscription : novembre 2004 Messages : 992 Points : 434 Points : 434	en jquery tu peux faire des trucs stylés! jquery sur google
	00

25/10/2011, 19h48	#9
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	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';
	10

28/10/2011, 17h33	#12
Alban 56 Invité régulier Inscription : novembre 2008 Messages : 46 Détails du profil Informations forums : Inscription : novembre 2008 Messages : 46 Points : 6 Points : 6	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.
	00

29/10/2011, 15h41	#15
Alban 56 Invité régulier Inscription : novembre 2008 Messages : 46 Détails du profil Informations forums : Inscription : novembre 2008 Messages : 46 Points : 6 Points : 6	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.
	00

29/10/2011, 17h18	#17
Alban 56 Invité régulier Inscription : novembre 2008 Messages : 46 Détails du profil Informations forums : Inscription : novembre 2008 Messages : 46 Points : 6 Points : 6	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
	00

29/10/2011, 17h55	#18
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	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.
	10

31/10/2011, 20h35	#20
Alban 56 Invité régulier Inscription : novembre 2008 Messages : 46 Détails du profil Informations forums : Inscription : novembre 2008 Messages : 46 Points : 6 Points : 6	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email