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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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.

Voir 40 message(s) de cette discussion en une page