[résolu] Border autour d'une image avec lien au survol

Bonjour,

mon client souhaite qu'une image qui pointe sur une autre page s'entoure d'un trait d'une couleur à son survol et d'une autre couleur si l'internaute a déjà cliqué dessus, comme ici.
Sauf que sur cet exemple c'est du JS et je me demandais si on ne pouvais pas le jouer + simple avec une simple classe, du style :

a.lienimage {
border:1px solid #ffffff;
}

a.lienimage:hover {
border-top:1px solid #000;
border-spacing:0;
}

Mais en fait la bordure ne s'affiche que sur le bottom de l'image, et encore 2 pixels + bas, et remonte un tout petit peu sur les côtés : comment faire pour que ça fonctionne, avez-vous déjà essayé ?
Modifié par sevblue (12 Apr 2007 - 18:13)

Tu peux appliquer ta bordure à l'image et non au lien

a.lienimage:hover [b]img[/b] {border:1px solid #000}

Ah oui bonne idée ! Mais comment le comportement peut-il changer au survol de la souris si la propriété n'est pas sur le lien ?

Je ne comprends pas bien ce que tu veux dire? Dans mon exemple, on dit "applique une bordure aux images qui se trouvent dans un lien survolé", c'est tout.

Ok j'avais lu tellement vite ta réponse que je n'ai pas vu le code : c'est bon ça marche, merci bcp !
(pr ne pas que l'image bouge, j'ai ajouté un border même taille et couleur du fond à l'image hors survol)

Tu peux aussi corriger le décalage en attribuant une marge négative correspondante à la taille de la bordure

Là par contre je sèche, j'ai testé et je n'ai pas de résultat.
De + la bordure au survol s'affiche sous FF et pas IE...

sevblue a écrit :
Là par contre je sèche, j'ai testé et je n'ai pas de résultat.

Sur quoi? Le coup de la marge négative?

la marge négative (à-1px) sur les 2 navigateurs et la marge tout court sur IE6.

Pour ie (6 je suppose?), honnêtement je n'en sais rien... et je m'en contrefous

Pour tous les autres:

a.lienimage:hover img {margin:-1px 0 0 -1px}

Yes pour IE6, mais le client lui ne s'en fout pas, je fais donc chercher.
Pour la marge négative, je vais utiliser la méthode de la bordure de la couleur du fond car ça fait bouger le texte sous l'image d'1px.

Merci bcp de ton aide Benjamin !

sevblue a écrit :
Yes pour IE6, mais le client lui ne s'en fout pas, je fais donc chercher.
Pour la marge négative, je vais utiliser la méthode de la bordure de la couleur du fond car ça fait bouger le texte sous l'image d'1px.

Merci bcp de ton aide Benjamin !

Pas de quoi! N'oublie pas d'indiquer que ton sujet est résolu.

Même si ça n'est pas résolu pour IE ?

sevblue a écrit :
Même si ça n'est pas résolu pour IE ?

Ah, heu... Si tu considères que tu as assez d'infos, alors oui, ton sujet est bel et bien résolu Si tu as encore besoin d'aide pour ie par contre, attends encore un peu

Compris !

Alors voici la solution trouvée, après avoir jeté un oeil sur ce tuto,

> pour FF :

a.lienimage img {border:1px solid #ffffff;}
a.lienimage:hover img {border:1px solid #000;}

> pour IE :

a.lienimage {
border:1px solid #ffffff;
margin:-1px 0 0 -1px;
}

a.lienimage:hover {
border:1px solid #000;
margin:-1px 0 0 -1px;
border-bottom:0;
}

Pi là je vais donc ajouter [résolu].