Discussion :

[qmulonainbus]

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>

[Joe Le Mort]

Code :

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

1
2
</style>
</div> <!-- end of page_head -->

euh y'a pas de début de DIV. normal ?

c'est pas ca qui pose probleme pour les "22 pixels environ"

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;
}

[qmulonainbus]

oups je vais corriger ce début de div

ahaa non ce n'est pas ça, ce -20px sert à faire un effet de rollover avec une seule image qui comprend 2 état : image affichée normal-image affichée lors du : hover, donc 20 pixels plus bas) tu suis?

[fallais]

Pour le cadre regarde si t'as mis border="0" a ton image.
Pour les "22px" regarde dans a.gallery je pense que ca vient de la

[qmulonainbus]

après modification
-ajout de border:0;
les contours sont toujours là (mais ça ressemble à contour type lien hypertexte)

et pour le 22px dans a.gallery, je suis un peu coincé, je ne peux pa la retirer car elle permet de faire une suite bouton sur une ligne, si je met 0 hop tout les boutons au même endroit et idem si je met position:absolute
certes cela corrige le pb des 22px pour l'autre image mais non ...

pour éclairer votre lanterne (et que vous puissiez éclairer la mienne )
voici un zip contenant les fichiers concernés (doublehover.zip)
http://www.yousendit.com/transfer.ph...6699D67E112E11
merci pour votre aide

[Linaa]

Pour les contours, le style correspondant est text-decoration : none;