28172 sujets

CSS et mise en forme, CSS3

Rollover stroboscopique.... [Résolu]

Bonjour.

J'ai un soucis avec un effet rollover. Voici ce que je veux faire: je tente de faire une galerie de photos. L'idée est que lorsque le visiteur approche de l'image affichée, il y a un rollover qui fait apparaître une flèche pour voir l'image suivante ou l'image précédente.

Sur Safari ou FirefoxMac, lorsque je promène mon curseur sur le block lien, la flèche apparaît par intermittence tandis que pour IE (via Virtual PC), il a fallu que je laisse le texte (au lieu de le faire disparaître avec text-indent), car il faut passer sur les lettres pour obtenir le même effet (il ne reconnaît pas le block de lien). J'ai essayé plein de choses (selon mes humbles connaissances) et je ne trouve pas ce qui cloche.

Voici mon code et un lien pour voir ce qui se passe: http://largowin.com/zz/index.html 





<link href="base1.css" rel="stylesheet" type="text/css" />
<link href="base2.css" rel="stylesheet" type="text/css" />
<link href="text.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="conteneur">

<div id="presse">
<img src="image.jpg" alt="image de fond" />
<a class="fleche_gauche" href="#">gauche</a>
<a class="fleche_droite" href="#">droite</a>
</div></div>

</body>
</html>




#presse{

position:absolute;
top:125px;
left:260px;
width:620px;
}

a.fleche_gauche {
position:absolute;
z-index: 1;
top:0px;
left:0px;
height:400px;
width:150px;
display:block;
text-decoration:none;
	
}

a:hover.fleche_gauche{ 
display:block;
background-image:url(prev.gif);
top:0px;
left:-50px;
height:45px;
width:45px;
text-decoration:none;
	
}

a.fleche_droite {
position:absolute;
z-index: 1;
top:0px;
left:150px;
height:400px;
width:150px;
display:block;
text-decoration:none;
	
}

a:hover.fleche_droite{ 
display:block;
background-image:url(next.gif);
top:0px;
left:290px;
height:45px;
width:45px;
text-decoration:none;
	
}

Modifié par largowin (30 Mar 2008 - 23:32)
Modérateur
bonjour,

l'effet 'stroboscopique' Smiley smile est normale .

Le redimensionnement de ta balise a fait qu'elle ne se trouve plus sous ta souris.
essai comme ceci (en jouant sur un padding et un background en no-repeat.
#presse{

position:absolute;
top:125px;
left:260px;
width:620px;
}

a.fleche_gauche {
position:absolute;
z-index: 1;
top:0px;
left:0px;
height:400px;
width:150px;
display:block;
text-decoration:none;
	
}

a:hover.fleche_gauche{ 
background:url(prev.gif) top left no-repeat;
padding-left:46px;
left:-46px;
}

a.fleche_droite {
position:absolute;
z-index: 1;
top:0px;
left:150px;
height:400px;
width:133px;
display:block;
text-decoration:none;
text-align:right;
}

a:hover.fleche_droite{ 
background:url(next.gif)  no-repeat top  right;
padding-right:47px;
text-decoration:none;
}

En conservant la zone couverte par la balise <a> au 'onmouseover' , le navigateur ne jongle plus entre le hover / pas hover .

GC
Super! Merci beaucoup!

Me reste plus qu'à régler le problème pour IE où le lien n'est que sur le texte plutôt que sur toute la div.

Merci.
Modérateur
bonsoir,

pour activer le rollover sur l'ensemble de ta balise dans IE6 , il faut aussi lui appliqué un background.

Pour ce faire , on peut simplement déja appliqué l'image du hover , en la positionnant en dehors de la zone visible de ta balise a .

exemple:
a.fleche_gauche {
position:absolute;
z-index: 1;
top:0px;
left:0px;
height:400px;
width:150px;
display:block;
text-decoration:none;
background:url(prev.gif) 1000px no-repeat;	
}

a:hover.fleche_gauche{ 
background:url(prev.gif) top left no-repeat;
padding-left:46px;
left:-46px;
}

non seulement de rendre cette regle effective dans IE6 comme ailleurs , on fait un preload de l'image qui est alors en cache.

Pour regler ce type de bug , il faut appliquer un background a <a> et un background a a:hover legerement différent (la position , une couleur transparente , ...).

(Pas de sources Smiley smile , ce n'est qu'observations et recoupage de differents comportements remarquables , mais la roue est souvent réinventée .... )

GC
Sujet clos
Aller à