Image survolée dans une autre image

Version imprimable

Bonjour la Communauté,

Je cherche à faire "bouger" un bouton lorsqu'on le survole. Je pensais que cela serait très simple... Grosse erreur, rien ne fonctionne comme je le voudrais.
IL s'agit d'une bouton dans mon header.

Voici le code html :
Code:

1 2 3 <div id="headerv"> <div class="btn"></div> </div>
Et le fameux code css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 div#headerv{ background: url(../images/visiteurs/headid3-v5.png) no-repeat; width:879px; height:197px; margin-top:10px; } .btn{ float:right; background: url(../images/visiteurs/btn1.png); margin-right:32px; margin-top:54px; } .btn hover{ float:right; background: url(../images/visiteurs/btn2.png); margin-right:32px; margin-top:54px; }
Merci pour votre aide.

19/11/2016, 10h25
NoSmoking

Bonjour,

Citation:

Grosse erreur, rien ne fonctionne comme je le voudrais.

belle description du soucis rencontré :aie:

Ta <div class="btn"> n'étant pas dimensionnée elle n'apparaîtra pas à l'affichage.
19/11/2016, 10h35
solorac

Citation:

Envoyé par NoSmoking

belle description du soucis rencontré :aie:

Désolé pour la description du problème d'affichage. Aucun modification de l'image au survol ne s'effectue.

Citation:

Envoyé par NoSmoking

Ta <div class="btn"> n'étant pas dimensionnée elle n'apparaîtra pas à l'affichage.

Que cela signifie-t-il ? Je dois mettre les dim de mes images ?
19/11/2016, 11h13
solorac

En faisant quelques recherches, j'ai trouvé qu'en rajoutant

Code:

display: block;

Cela fonctionne comme je le voudrais.
Par contre, je n'ai pas très bien compris pourquoi et cela me pose un problème.
Plutôt que de faire une recherche sur les propriété, quelqu'un aurait-il une explication simple à me donner ?
Merci
19/11/2016, 11h16
NoSmoking

Code:

.btn hover{

il te manque les :

Code:

.btn:hover{
19/11/2016, 11h19
solorac

Encore une précision svp...

Si je voulais mettre une 3ème image (lorsque le bouton est cliqué), comment faire ?

Après quelques recherches, on parle de javascript (moyen pour moi), de onclick / onmouseover et onmouseout.

Une petite orientation me serait bien utile.

MErci
19/11/2016, 11h21
solorac

Citation:

il te manque les :

Oui, cela je l'avais vu en relisant mon code.
:lol:
19/11/2016, 11h33
NoSmoking

Ceci est une autre problématique, si tu veux que l'image de ton bouton soit persistante après click il te faut regarder du coté d'une astuce qui consistera à utiliser un <input type="checkbox"> masqué.

Tu peux regarder Galerie au clic sans JavaScript pour l'usage de la technique.
21/11/2016, 13h40
solorac

Ok, merci

Je te mets ici le principal du besoin pour un « bouton 3 états »

Code HTML nécessaire

Code:

1
2
3
4
<label>
  <input class="i_btn" type="checkbox">
  <span class="btn">Le bouton</span>
</label>

Code CSS minimum utile

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.i_btn {
  position: absolute;
  left: -999em;
}
.btn {
  background-image: linear-gradient(to bottom, #A7CFDF, #23538A);
}
.btn:hover {
  background-image: linear-gradient(to bottom, #CFDFA7, #008C00);
}
.i_btn:checked ~ .btn {
  background-image: linear-gradient(to bottom, #DFA7CF, #D20202);
}

dans cet exemple on change la couleur du fond.