28221 sujets

CSS et mise en forme, CSS3

[non résolu] rollover & activation/focus d'un lien en css

Bonjour,

J'ai programmé un affichage de liens sous la forme qui suit en fin de post. Sous IE le lien s'ouvre et les événements de survol/activation des liens fonctionnent, tandis que sous Firefox les événements fonctionnent mais le lien ne s'ouvre qu'en cliquant dans les quelques pixels non couverts par un <span> ou une image.

Si quelqu'un a une suggestion pour que le lien fonctionne ça m'ôterait une "fière chandelle du pied". Le problème semble venir du fait que les éléments qui apparaissent/disparaissent le font sur la surface du lien et pas en dehors comme c'est souvent le cas. Mais j'ai besoin que cela fonctionne sous cette forme.

Voici un code propre et net. Le résultat est visible sur http://www.abdel-inn.com/test.htm

Je pense que c'est plus clair comme ça. Mon problème est que le lien s'ouvre sous IE, mais pas sous Firefox lorsqu'on clique dessus.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bug de liens</title>
<style  type="text/css">

/*taille des éléments*/

a {
display:block;
width: 122px;
height: 122px;}

img {
width: 120px;
height: 120px;}

/*éléments des liens*/

a {border-style: outset;}
a span {display: inline;}
a .img1 {display: none;}
a .img2 {display: none;}

/*au survol*/

a:hover {border-style: inset;}
a:hover span {display: none;}
a:hover .img1 {display: block;}
a:hover .img2 {display: none;}

/*à la sélection et au clic*/

a:active {border-style: solid;}
a:active span {display: none;}
a:active .img1 {display: none;}
a:active .img2 {display: block;}
a:focus {border-style: solid;}
a:focus span {display: none;}
a:focus .img1 {display: none;}
a:focus .img2 {display: block;}

</style>
</head>
<body>
<a href="http://www.abdel-inn.com/" target="_blank">

<span>un petit texte</span>

<img src="http://www.abdel-inn.com/vignettes/1010.jpg" alt="image1" class="img1" />

<img src="http://www.abdel-inn.com/vignettes/1009.jpg" alt="image2" class="img2" />

</a>
</body>
</html>


NB: c'est schématique bien entendu pour faciliter la compréhension. Mon code Xhtml et CSS est valide W3C.

Merci d'avance à ceux qui se pencheront sur mon problème.
Modifié le 01 Nov 2004 - 22:53
Si seulement c'était aussi simple Smiley lol

L'horrible faute de frappe dont tu parles ne figure pas dans mon code (sinon il ne serait pas valide).

Autre oubli dans ma transcription: le lien est en _blank. Mon soucis est justement d'afficher un effet visuel sur la page tandis que s'ouvre une nouvelle fenêtre.

Si je supprime les codes relatifs aux pseudo-classes a:active et a:focus le lien s'ouvre sans problème. Par contre en supprimant ceux du a:hover ça reste bloqué.

La navigation au clavier est efficace : tabulation pour passer d'un lien à l'autre, puis entrée pour ouvrir le lien choisi.

Mon problème semble donc lié au fait que le clic sur le lien n'est pas correctement interprété lorsque les pseudo-classes a:active et a:focus sont définies. Mais je n'arrive à à trouver pourquoi.
Modifié le 01 Nov 2004 - 20:43
Sujet clos
Aller à