Discussion :

[horkets]

Bonjour à tous,
Quelqu'un pourrait il me dire comment faire en sorte que mon image hover s'affiche ?
Ci-dessous, le code se trouvant dans body

Code :

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

1
2
3
4
5
6
 
<div id="circle2">
  <a class="img2003" href="/2003">
    <img alt="2003" src="/sites/default/files/2003.png" />
  </a>
</div>

et le css associé

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
 
#circle2 {
    position:relative;
    background:url(/sites/default/files/circle2.png) no-repeat;
    width:600px;
    height:600px;
}
.img2003 {
  position: absolute;
  top: 300px;
  left: 300px;
}
.img2003:hover {
  position: absolute;
  background:url(/sites/default/files/20xx-hover.png) no-repeat;
}

Merci d'avance pour votre aide.

H

[horkets]

Voici ma solution :
pour le 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
/* background (les deux cerlcles) */
#circle2 {
    position:relative;
    float:center;
    background:url(/sites/default/files/circle2.png) no-repeat;
    width:600px;
    height:600px;
}
/* les position des images + les :hover */
.img2003 {
  background:url(/sites/default/files/2003.png) no-repeat;
  position: absolute;
  width:101px;
  height:51px;  
  top: 388px;
  left: 15px;
}
.img2003:hover {
  background:url(/sites/default/files/20xx-hover.png) no-repeat;
  position: absolute;
  width:101px;
  height:51px;
  top: 395px;
  left: 15px;
  z-index:0;
}

et le code html associé

Code :

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

1
2
3
4
 
<div id="circle2">
  <a class="img2003" href="/bnc_2003"><img src="" /></a>
</div>