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

**dhillig** · 11/12/2014, 23h32

Bonsoir à tous,
Pour un effet désiré, j'ai des boutons dans une div "nav". Je bien réussi à retravailler les boutons par défaut, et leurs ai attribué qq certaines choses.
Mais je ne vois pas le moyen (en CSS) 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...) :
Voici les CSS :

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
	margin-right: 0px;
	margin-bottom: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 0px 0px 0px 0px;
	box-shadow: 0px 0px 0px 0px;
	border-style: none;
	list-style: none;
	opacity: 1;
	border-width: 0px;
	text-align: center;
	text-shadow: 0px 0px 0px;
	background-color: #FFFFFF;
	background-position: 0% 0%;
	background-size: cover;
	padding: 2px;
	color: #000000;
-moz-opacity:0.8;
-khtml-opacity:0.8;
-ms-filter:"alpha(opacity=80)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:alpha(opacity=80);
opacity:0.8;
zoom: 1;/* HACK POUR IE */
}
button:hover {
	width: auto;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 0px 0px 0px 0px;
	box-shadow: 0px 0px 0px 0px;
	border-style: none;
	list-style: none;
	border-width: 0px;
	text-align: center;
	text-shadow: 0px 0px 0px;
	background-color: #FFFFFF;
	-moz-opacity:0.5;
-khtml-opacity:0.5;
-ms-filter:"alpha(opacity=6)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5);
filter:alpha(opacity=5);
opacity:0.5;
zoom: 1;/* HACK POUR IE */
}
    button h1 {
	font: normal 20px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

Merci pour votre aide

dh

**NoSmoking** · 12/12/2014, 13h16

Bonjour,
il te faut passer par des input type="radio" ayant le même name ainsi le cochage d'un décoche les autres.

**dhillig** · 12/12/2014, 21h38

Bonsoir à tous,
@NoSmoking : (pour commencer : MERCI !!!) je craignais cette réponse

. Ma page avec ses "button" était prête, avec ses <onclick -changement de fond du body> et je m'attendais à y inclure la lecture horizontale (THX NoSmoking

Peut-on adapter les boutons radio à cela ? :

Code html :

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

<button onclick="document.body.className='Test 1';"><h1>Test-1</h1></button>

ainsi que la lecture horizontale ? Sinon, j'abandonne. Les effets désirés en premier étant le changement de fond au clic et la lecture horizontale.
Encore merci NoSmoking et bon week-end à tous !
dh

**NoSmoking** · 13/12/2014, 11h48

Pour être honnête cela ne peut pas se fait entièrement en CSS, il y a action sur un élément et modification d'un élément non relié ceci implique du javascript.

Je bien réussi à retravailler les boutons par défaut

Les type=radio peuvent également se faire "oublier" et être redesignés en CSS

exemple simple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation Radio Button Masqué</title>
<meta name="Author" content="NoSmoking">
<style>
body {
  width:90%;
  margin:1em auto;
  padding:0;
  font:100%/150% Verdana,sans-serif;
}
.fond_1{
  background:#FEE;
}
.fond_2{
  background:#EFE;
}
.fond_3{
  background:#EEF;
}
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:#DDD;
}
</style>
</head>
<body>
<input type="radio" id="r_1" value="fond_1" name="modif"><label for="r_1">Red</label>
<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2">Green</label>
<input type="radio" id="r_3" value="fond_3" name="modif"><label for="r_3">Blue</label>
<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;
    };
  }
</script>
</body>
</html>

**dhillig** · 13/12/2014, 15h20

Salut NoSmoking,
Ça marche parfaitement et passer via les CSS pour les boutons m'est d'un grand confort

MERCI !
Par contre, je me suis mal exprimé (quand on a le "nez dedans", on pense toujours être clair :/ Par changement de fond au clic, je parlais de changement de body avec image en mode cover.
J'ai bien tenté dans le code de mettre button.green (qui en réalité n'est pas un fond gris, mais un body avec telle image en cover) en "value", au cas où... et évidemment, ça ne fonctionne pas

Cela est-il possible ?
Bon week-end,
dh

**NoSmoking** · 13/12/2014, 18h34

... je parlais de changement de body avec image en mode cover.

je ne saisie pas trop ce que tu veux dire par là, dans le CSS tu mets ce que tu veux.

Essaies en mettant ceci

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
body {
  background-image:url(http://cyberzoide.developpez.com/misc/background40-1280x1024.jpg);
  background-size:cover;
}
.fond_1{
  background-color:#FEE;
  background-image:url(http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg);
}
.fond_2{
  background-color:#EFE;
  background-image:url(http://cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);
}
.fond_3{
  background-color:#EEF;
  background-image:url(http://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
}

**dhillig** · 13/12/2014, 23h57

Mais tu m'as complètement compris NoSmoking !!! C'était pourtant tellement bête :/ Encore merci !
Par contre, je n'ai pas réussi à lier une ancre (link) à ce code :

Code html :

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

<input type="radio" id="r_1" value="fond_1" name="modif"><label for="r_1">Red</label>

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.
Can you help me ? Mais évidemment, vu l'intitulé de la discussion... cette dernière est résolu

Merci et bonne soirée !!!
dh

**NoSmoking** · 14/12/2014, 08h39

Comme pour le CSS, dans la fonction attachée à l'événement click de l'élément tu peux mettre à peu près tout ce que tu veux.

Dans l'exemple que je t'ai mis tu pourrais faire

Code javascript :

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

1
2
3
4
5
6
oRadio[i].onclick = function(){  
  document.body.className = this.value;
  // ICI une autre action
  // et encore une autre action
  //...etc...
};

**dhillig** · 14/12/2014, 16h25

Slt NoSmoking,
Merci pour ta réponse
J'ai tenté cela :

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
<body>
<input type="radio" id="r_1" value="fond_1" name="modif"><label for="r_1">Red</label>
<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2">Green</label>
<input type="radio" id="r_3" value="fond_3" name="modif"><label for="r_3">Blue</label>
 
<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='fond_1';
          <a href='#' id='Ancre_2'></a>;
    };
  }
</script>
<ul>
  <div id="Ancre_2"></div>
</ul>
</body>
</html>

et aussi avec cet autre "appel" :

Code html :

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

<a href="#">'Ancre_2'</a>

et tout bêtement :

Code html :

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

<a href="#Ancre_2"></a>

Je n'arrive pas à faire appel à une ancre, ni à un lien externe.
J'ai encore du zapper qq chose

Merci pour ton aide et bonne fin de week-end,
dh

**dhillig** · 14/12/2014, 16h34

PS : je ne sais pas comment l'ancre_2 s'est retrouvé entre dans une balise UL. J'ai déjà rectifié cette erreur

**NoSmoking** · 15/12/2014, 19h10

Je n'arrive pas à faire appel à une ancre, ni à un lien externe.

j'ai l'impression que tu te mélanges les pinceaux, il te faut revenir à des liens classiques A et le changement/maintient de l'aspect se faisant en javascript.

**dhillig** · 15/12/2014, 20h50

Slt NoSmoking,
Merci pour ta patience... T'es TOP !!!
"me mélanger les pinceaux", c'est peu dire !!!

J'ai cherché ce que voulait dire "il te faut revenir à des liens classiques A"
Alors, j'ai fait le B.A.BA, c'est à dire cela (pour le premier bouton) :

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"><a href="#Ancre_2">Red</a></label>
<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2">Green</label>
<input type="radio" id="r_3" value="fond_3" name="modif"><label for="r_3">Blue</label>

Bon, l'appel à l'ancre fonctionne (mais pour le coup chasse les boutons*), bouton 2 et 3 OK.
De bouton 3 à bouton 2 : OK mais bouton 2 à 1 : l'appel à l'ancre se fait toujours sur le bouton un mais le fond du bouton 2 est conservé.
Il y a encore un truc que je n'ai pas pigé :/
Peux-tu me dire quoi ?
Merci et bonne soirée,
dh
*la barre de navigation est un réel problème que je pensais avoir résolu... mais non. D'ailleurs sur bcp de sites pro, elle est scrollable. Je vais potasser le prob avant de lancer une nouvelle discussion (mais les codes .js etc donnés par bon nombre de sites ne fonctionnent pas dans mon cas).

**NoSmoking** · 16/12/2014, 22h42

Il y a plusieurs façon de régler ton problème mais celle que tu présentes est une des plus vicieuses bien que positionnellement fonctionnelle par le biais de la propagation des events, la balise A reçoit le clic qui est reçu par le LABEL contenant qui transmet à l'INPUT du for, par contre pas sûr que cela soit pris en compte par tous les navigateurs, à tester.

Il te reste la solution d'ajouter une action dans la fonction par exemple simulant le click sur le lien-ancre

Code javascript :

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

1
2
3
4
oRadio[i].onclick = function(){
  document.body.className = this.value;
  document.location.hash = this.value;
};

tu pourrais également faire la même démarche en utilisant directement les balises A.

Je voudrais quand même te rappeler qu'un projet quel qu'il soit doit se voir d'une façon globale et que certaines solutions envisageables ponctuellement ne soient plus pertinentes dans un contexte plus large. J'ai peur que tu te disperses un peu trop, mais il me semble te l'avoir déjà dis, sauf si bien sûr il s'agit de projet différents

**dhillig** · 17/12/2014, 21h15

Bonsoir NoSmoking,
Qu'entends-tu par "balises A" ? Les balises <a> ?
Si c'est cela, je pense avoir tout essayé :/
Merci pour ton script, mais je pense que comme l'appel à un fond (

Code html :

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

<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2">Green</label>

), il faut bien écrire une seconde ligne de code <input type = "radio etc... > pour faire appel à un # (???) vu cette ligne supplémentaire :

Code :

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

document.location.hash = this.value.

au script ?
Là, je sèche encore

Pour le reste, tu as bien raison... Je dois avouer que mon projet est plus qu'alambiqué !!! Et avec les .js/$, je suis en train de reproduire ce que j'ai toujours critiqué aux sites internet d'il y a 15/20 ans : la multitude d'effets. A l'époque, par exemple, avec les fonds bien trash + musique de fond + le "tching" lors d'un click sans oublier ces adorables petites étoiles qui suivent la souris sur l'écran !

J'ai aussi le tort de m'inspirer de thèmes Wordpress (un peu trop pour un débutant). Mais bon, comme je suis têtu, j'aimerais bien résoudre ce problème de liens "liés" au boutons radio

Pour en revenir à Wordpress, j'ai remarqué que bon nombre de formateurs (html, dreamweaver etc...), directeurs artistiques bi-média et autres n'ont qu'un site perso... issu d'un Wordpress !!!
Alors merci à ce site et à NoSmoking (et autres pompiers de la programmation) d'aider ceux qui passent des heures derrière un écran à tenter de comprendre et de faire à la mano ce qu'ils désirent plutôt que de se personnaliser un thème gratuit ou payant pour qq dizaines d'euros !!!
Bonnes fêtes de fin d'année à tous (et plus particulièrement à NoSmoking dont j'espère avoir des nouvelles avant le 31

(sinon, pas grave).
dh

**NoSmoking** · 21/12/2014, 11h05

Qu'entends-tu par "balises A" ? Les balises <a> ?

Oui

La ligne document.location.hash = this.value, modifie l'ancre de la page, cela revient au même que si tu avais eu un <a href="#fond_2">Green</a>.

Soit tu passes par des radio soit tu passes par des liens mais dans les deux cas tu ne peux pas tout faire, il te faut du javascript.

**dhillig** · 21/12/2014, 15h50

Slt NoSmoking,
J'ai tout repris à 0, tout retenté. Rien à faire, je ne vois pas où mettre les balises <a>

et cette méthode

Code :

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

<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2"><a href="#ancre_1">Green</a></label>

ne fonctionne pas, ce qui ne te surprendra pas

Bonne fin de week-end.
dh
PS : ci-dessous, le code actuel de la page.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation Radio Button Masqué</title>
<meta name="Author" content="NoSmoking">
<style>
body {
  background-image:url(http://cyberzoide.developpez.com/misc/background40-1280x1024.jpg);
  background-size:cover;
}
.fond_1{
  background-color:#FEE;
  background-image:url(http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg);
}
.fond_2{
  background-color:#EFE>;
  background-image:url(http://cyberzoide.developpez.com/misc/background12e-1600x1200.jpg);
}
.fond_3{
  background-color:#EEF;
  background-image:url(http://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
}
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;
  background:#DDD;
}
#ancre_1 {
	width: 100%;
	height: 800px;
	background-color: #993366;
	padding: 0px;
	position: absolute;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	top: 100%;
}
</style>
</head>
<body>
<input type="radio" id="r_1" value="fond_1" name="modif"><label for="r_1">Red</label>
<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2">Green</label>
<input type="radio" id="r_3" value="fond_3" name="modif"><label for="r_3">Blue</label>
<div id="ancre_1"></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>

**NoSmoking** · 21/12/2014, 17h55

Envoyé par dhillig

... ne fonctionne pas, ce qui ne te surprendra pas

je ne vois aucune ancre dans ton code...?

**dhillig** · 22/12/2014, 20h06

Bonsoir NoSmoking,
Effectivement, il n'y avait pas d'ancre :/
Voici le body :

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
<body>
<input type="radio" id="r_1" value="fond_1" name="modif"><label for="r_1"><a href="#test">Red</a></label>
<input type="radio" id="r_2" value="fond_2" name="modif"><label for="r_2">Green</a></label>
<input type="radio" id="r_3" value="fond_3" name="modif"><label for="r_3">Blue</label>
<a name="test"></a><div id="ancre_1"></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>

Le problème, c'est que ne sais pas comment faire un appel à l'ancre excepté comme c'est mentionné dans le code (via label...).
Et donc, l'ancre est bien appelée, mais pour le coup, ça joue sur les fonds : le .fond_1 garde le background du précédent bouton cliqué : si je vais du 3e bouton (.body_3) et que je clique sur le 1er bouton (.body_1), l'ancre (appelé par le premier bouton) apparaît bien, mais le background reste celui du 3e bouton (.body_3).
C'est un peu long mais je tente d'être le plus clair possible

Bonne soirée et encore merci,
dh