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

**NoSmoking** · 31/10/2011, 23h07

dans l'exemple que je te mis un simple ajout de

Code css :

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

1
2
3
button:hover{
  background-color : #e0e0e0; /* par exemple */
}

dans la partie style devrait suffire.

**Alban 56** · 01/11/2011, 14h32

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 :

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
<!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;

**NoSmoking** · 02/11/2011, 09h25

Code css :

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

1
2
3
4
#div_bouton {
  button over{
  backgroud-color : #e0e0e0; / * par exemple * /
)

n'est pas correct

Code css :

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

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.

**Alban 56** · 02/11/2011, 15h50

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.

**NoSmoking** · 02/11/2011, 16h46

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

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.

**Alban 56** · 03/11/2011, 10h33

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

Pour la résolution écran vous avez une idée ?

**NoSmoking** · 03/11/2011, 19h35

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

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.

**Alban 56** · 04/11/2011, 14h40

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 :

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

Invité · 04/11/2011, 16h19

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
<!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.

**Alban 56** · 04/11/2011, 17h22

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.

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

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

JavaScript

Discussions similaires

Partager

Partager