Bonjour
Je me suis inspiré d'une gallerie css pour faire un double rollover :
en haut à gauche 2 bouton-rollover, quand on les survolent cela déclenche le changement d'opacité de ce que je vais appeler mes second rollover (ce qui est inexacte).

seulement voilà mes seconds rollovers se décallent tous de 22 pixel vers la droite et de plus sont entourés d'un cadre bleu pour l'un et violet pour l'autre.
j'aimerais :
- que ces cadres disparaissent
- que mes second rollover ne soient plus décalés vers la droite de 22px
- que ce soit compatible avec IE

auriez-vous une idée de comment faire?
cordialement

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
73
74
75
76
77
78
<style type="text/css">
 
#container
{
position:absolute;
width:134px;
height:20px;
top:0px;
left:0px;
background:none;
border:1px
solid #000;
margin:0 0;
}
 
a.gallery
{
 display:bloc;
 border:0px solid #000;
 width:22px; 
 height:20px;
 float:left;
 margin:0px 0px;
 position:relative;
}
 
a.slidea {
  background:url(Bmenu.gif);
  opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;
  background-repeat:no-repeat;
  background-position: 0 0;
} /*liens miniatures*/
 
a.slideb {
  background:url(Bmenu.gif);
  opacity:.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;
} /*liens miniatures*/
 
 
a.gallery span 
{
  visibility:visible; /*cool*/
  display:block; 
  position:absolute; 
  width:640px; 
  height:158px; 
  top:0px; 
  left:0px; 
  background:none; 
;}
 
a.slidea span {left:0px; top:20px;} /*zone où apparait l'image cliquée*/
a.slideb span {left:0px; top:20px;} /*zone où apparait l'image cliquée*/
 
 
a.gallery:hover 
{
  border:0px; 
  background-image: url(Bmenu.gif);
  background-repeat:no-repeat;
  background-position: 0 -20px;
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1;
}
 
a.gallery:hover span 
{
visibility:visible;
} /*survol etat*/
 
 
</style>
</div> <!-- end of page_head -->
<div id="info">
 
<div id="container">
<a class="gallery slidea" href="index.html"><span><img src="1.gif" ></span></a>
<a class="gallery slideb" href="#nogo"><span><img src="2.gif" ></span></a>
</div>