Discussion :

[solorac]

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

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

1
2
3
<div id="headerv">
    <div class="btn"></div>
</div>

Et le fameux code 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
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.

[NoSmoking]

Bonjour,

Grosse erreur, rien ne fonctionne comme je le voudrais.

belle description du soucis rencontré


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

[solorac]

belle description du soucis rencontré

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

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 ?

[solorac]

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

Code :

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

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

[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

[NoSmoking]

Code :

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

.btn hover{

il te manque les :

Code :

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

.btn:hover{

[solorac]

il te manque les :

Oui, cela je l'avais vu en relisant mon code.

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