Comment faire pour qu'un bouton reste "coché" avant que l'on ne clique sur un autre ?

**dhillig** · 25/12/2014, 18h55

J'y arrive pô !!!

Bonne fin de Noël,
dh

Invité · 26/12/2014, 01h11

Bonjour,
voici un petit code : http://codepen.io/jreaux62/pen/azmLEN

Code html :

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

1
2
3
<input type="radio" id="r_1" value="fond_1" name="modif"><label for="r_1" title="fond rouge">Red</label>
<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2" title="fond vert">Green</label>
<input type="radio" id="r_3" value="fond_3" name="modif"><label for="r_3" title="fond bleu">Blue</label>

Code css :

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
/* N.B. supprimer l'espace après http: ! */
body {
  background-image:url(http: //cyberzoide.developpez.com/misc/background40-1280x1024.jpg);
  background-size:cover;
}
/* COULEURS/IMAGES de BACKGROUND */
.fond_1{
  background-color:red;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12h-1600x1200.jpg);
}
.fond_2{
  background-color:green;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);
}
.fond_3{
  background-color:blue;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
}
/* BOUTONS radio */
input[type="radio"] +label{
	position: relative;
	display: inline-block;
	font-size: 0.8em;
	font-weight: normal;
	left: -3em;
	line-height: 2em;
	width: 5em;
	text-align: center;
	background: #EEE;
	border: 1px solid #CCC;
	cursor: pointer;
	margin-top: 0px;
}
input[type="radio"]:checked +label{
  font-weight:bold;
  font-style:italic;
  color:white;
}
/* COULEURS des boutons radio */
#r_1:hover +label, .fond_1 #r_1 +label{
  color:white;
  background-color:red;
}
#r_2:hover +label, .fond_2 #r_2 +label{
  color:white;
  background-color:green;
}
#r_3:hover +label, .fond_3 #r_3 +label{
  color:white;
  background-color:blue;
}

Code javascript :

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

1
2
3
4
5
6
7
var oRadio = document.querySelectorAll('input[type="radio"]'),
      i, nb=oRadio.length;
  for( i = 0; i <nb; i++){
    oRadio[i].onclick = function(){
      document.body.className = this.value;
    };
  }

**dhillig** · 26/12/2014, 19h30

Bonsoir à vous,
Merci jreaux92 pour ta réponse. Mais les liens ne fonctionnent toujours pas

Pire même, avec ces CSS :

Code :

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

1
2
background-color:green;
background-image:url(<a href="http://cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);" target="_blank">http://cyberzoide.developpez.com/mis...600x1200.jpg);</a>

Je n'ai même plus l'image de fond, uniquement le background -color.
Je pense depuis pas mal de temps qu'on est pas loin de résoudre ce prob, et j'espérais qu'avec ce "target="_blank">http://cyberzoide.developpez.com/mis...600x1200.jpg)" rajouté au background, on y était (même si mes liens ne sont que des ancres sur la seule et même page) :/
Bonne soirée et encore MERCI,
dh

Invité · 27/12/2014, 03h55

Arghhh !
ce

d'éditeur WYSIWYG DVP a ajouté automatiquement des liens [URL] !!!

Il fallait lire :

Code css :

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
/* N.B. supprimer l'espace après http: ! */
body {
  background-image:url(http: //cyberzoide.developpez.com/misc/background40-1280x1024.jpg);
  background-size:cover;
}
/* COULEURS/IMAGES de BACKGROUND */
.fond_1{
  background-color:red;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12h-1600x1200.jpg);
}
.fond_2{
  background-color:green;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);
}
.fond_3{
  background-color:blue;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
}

As-tu au moins CLIQUE SUR LE LIEN ? : http://codepen.io/jreaux62/pen/azmLEN

Envoyé par dhillig

comment faire pour que le bouton survolé garde les même préférences une fois cliqué, et revienne à l'état initial si on clique sur un deuxième bouton (et qui lui même perd ses attributions si on clique sur un troisieme bouton etc.... etc...)

Ca, c'est fait, non ?

Envoyé par dhillig

Le but initial étant de cliquer sur un bouton en faisant appel à l'ancre 1, cliquer sur un deuxième bouton (avec un nouveau background cover) qui lui fait appel à l'ancre 2.

Tu veux qu'au clic, on se déplace dans la page jusqu'à une ancre (1, 2, 3) ?

N.B. Je ne suis pas du 9-2, mais du 6-2, plus au Nord...

Invité · 27/12/2014, 04h46

Si j'ai bien tout compris,
voici ce que tu cherches : http://codepen.io/jreaux62/pen/gbweLq

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
<div id="afd">
  <a class="fd fd_1" href="#fond_1">Red</a>
  <a class="fd fd_2" href="#fond_2">Green</a>
  <a class="fd fd_3" href="#fond_3">Blue</a>
</div>
<div id="contenu">
  <div id="fond_1">
      <p>contenu 1
    </p><p>
Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.
    </p>
  </div>
  <div id="fond_2">
      <p>contenu 2
    </p><p>
Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.
    </p><p>
Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per aetatem firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit funesti carnificis manu.
    </p>
  </div>
  <div id="fond_3">
      <p>contenu 3
    </p><p>
Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
    </p><p>
Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
    </p><p>
Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.
    </p>
  </div>
</div>

Code css :

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
/* N.B. supprimer l'espace après http: */
body {
  background-image:url(http: //cyberzoide.developpez.com/misc/background40-1280x1024.jpg);
  background-size:cover;
}
.fond_1{
  background-color:red;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12h-1600x1200.jpg);
}
.fond_2{
  background-color:green;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);
}
.fond_3{
  background-color:blue;
  background-image:url(http: //cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
}
.fd{
	position: relative;
	display: inline-block;
	font-size: 0.8em;
	font-weight: normal;
	line-height: 2em;
	width: 5em;
	text-align: center;
	background: #EEE;
	border: 1px solid #CCC;
	cursor: pointer;
	margin-top: 0px;
  color:#666;
  text-decoration:none; 
}
.fd:hover, .fond_1 .fd_1, .fond_2 .fd_2, .fond_3 .fd_3 {
  font-weight:bold;
  font-style:italic;
  color:white;
  text-decoration:none; 
}
.fd_1:hover, .fond_1 .fd_1{
  background-color:red;
}
.fd_2:hover, .fond_2 .fd_2{
  background-color:green;
}
.fd_3:hover, .fond_3 .fd_3{
  background-color:blue;
}
/* extra (pour les tests) */
#afd {
  position:fixed; /* on fixe les boutons en haut (toujours visibles) */
  height:30px; 
  width:300px;
  top:5px; left:15px;
}
#contenu > div {
  padding:40px 5px 5px; 
  min-height:600px; 
  border:1px solid #ccc; 
  color:#fff; 
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
var oRadio = document.querySelectorAll('.fd'),
      i, nb=oRadio.length;
 
  for( i = 0; i <nb; i++){
    oRadio[i].onclick = function(){
      var str = this.getAttribute("href");
      document.body.className = str.replace('#', '');
    };
  }

Pour des déplacements fluides, tu peux t'interesser à : jQuery.ScrollTo

**NoSmoking** · 27/12/2014, 10h54

Envoyé par NoSmoking

L'astuce est d'avoir le même nom pour l'ancre et pour la classe CSS.

cela me semblait clair et suffisant !
exemple sur base de ce que j'ai mis avant

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
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation Radio Button Masqué</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  width:100%;
  min-height:100%;
  height:100%;
  margin:0;
  padding:0;
  font:100%/150% Verdana,sans-serif;
}
body {
  background-size:cover;
  background-attachment:fixed;
}
.ancre_1{
  background-color:#FEE;
  background-image:url('http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg');
}
.ancre_2{
  background-color:#EFE;
  background-image:url('http://cyberzoide.developpez.com/misc/background12e-1600x1200.jpg');
}
.ancre_3{
  background-color:#EEF;
  background-image:url('http://cyberzoide.developpez.com/misc/background12-1600x1200.jpg');
}
nav {
  margin:2em;
  position:fixed;
}
input[type="radio"] +label{
  position:relative;
  display:inline-block;
  font-size:0.8em;
  font-weight:normal;
  left:-3em;
  line-height:2em;
  width:5em;
  text-align:center;
  background:#EEE;
  border:1px solid #CCC;
  cursor:pointer;
}
input[type="radio"]:checked +label{
  font-weight:bold;
  font-style:italic;
  background:#FFF;
  border:1px solid #000;
}
 
h1 {
  color:#FFF;
  margin-top:3em;
}
#ancre_1, #ancre_2, #ancre_3{
  border-top:1px solid transparent;
  height:100%;
}
</style>
</head>
<body class="ancre_1">
<nav>
  <input type="radio" id="r_1" value="ancre_1" name="modif"><label for="r_1">Red</label>
  <input type="radio" id="r_2" value="ancre_2" name="modif"><label for="r_2">Green</label>
  <input type="radio" id="r_3" value="ancre_3" name="modif"><label for="r_3">Blue</label>
</nav>
<div id="ancre_1"><h1>ancre_1</h1></div>
<div id="ancre_2"><h1>ancre_2</h1></div>
<div id="ancre_3"><h1>ancre_3</h1></div>
<script>
  var oRadio = document.querySelectorAll('input[type="radio"]'),
      i, nb=oRadio.length;
  for( i = 0; i <nb; i++){
    oRadio[i].onclick = function(){
      document.body.className = this.value;
      document.location.hash = this.value;
    };
  }
</script>
</body>
</html>

Invité · 27/12/2014, 11h56

@NoSmoking
Ah ! tu vois !
l'éditeur WYSIWYG DVP t'a aussi ajouté automatiquement des liens <a...> ([url], en fait) dans tes background-image !!

Il faudrait signaler ce big bang bug !

Cela dit, ton code me semblait valable dès la 1ère fois

**NoSmoking** · 27/12/2014, 12h09

Effectivement pourtant cela ne l'a pas fait lors du premier post

...
visiblement cela dépend du contexte du code, à preuve

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.ancre_1{
  background-color:#FEE;
  background-image:url(http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg);
}
.ancre_2{
  background-color:#EFE;
  background-image:url(http://cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);
}
.ancre_3{
  background-color:#EEF;
  background-image:url(http://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
}

**dhillig** · 27/12/2014, 13h39

)))
Merci à tous les deux.
@NoSmoking : je n'avais pas vu ton code avant. J'ai beau avoir cherché, quand on voit la solution, cela paraît tout bête (comme moi

: la "value" du bouton n'est plus un fond, mais une ancre avec un fond. Il me semble avoir essayé ce genre de chose pourtant (mais certainement pas avec un code aussi propre)

Donc ça marche à 100% MERCI MERCI

@jreaux du 62

Donc pareil, MERCI MERCI. Oui, j'avais cliqué sur [URL=http://codepen.io/jreaux62/pen/azmLEN[/URL] mais j'en revenais au même point. Alors qu'avec http://codepen.io/jreaux62/pen/gbweLq : comme avec le code de NoSmoking : BRAVO BRAVO !!!
Tout ça pour ça

Ça me donne au moins l'occasion de chercher, de me tromper et donc d'apprendre

Par contre, jreaux pas du 9-2, tu dois trouver le changement d'ancre un peu brutal vu ton lien jQuery.ScrollTo. Je vais y jeter un œil

Encore MERCI et bon week-end !
dh

**dhillig** · 28/12/2014, 18h58

Bonsoir à vous,
Merci jreaux 62 de m'avoir fait découvrir jQuery.ScrollTo - TOP. J'ai maintenant pas mal de bases de pages, dont le site à lecture horizontale (THX NoSmoking !!!

) que je travaille peu à peu; enfin...la mise en page). Idem pour cette page boutons radios/ancres.
Mais je planche depuis hier sur jQuery.ScrollTo. La discussion étant close et mon projet super bien avancé grâce à vous, ce message est simplement destiné à vous remercier encore, et pour vous dire que j'ouvre deux nouvelles discussions suite à celle-ci. Parce que la découverte de certaines choses sont aussi celles de nouveaux problèmes

Donc peut-être à bientôt et bonne soirée

dh

Comment faire pour qu'un bouton reste "coché" avant que l'on ne clique sur un autre ?

CSS

Discussions similaires

Partager

Partager