Bordure image

[vincent.lepy]

Voila mon probleme. J'ai des images avec des bordures et je souhaitrai que ces bodures changent quand la sourie passe dessu. Pour mes lien text dans ma page CSS j'ai mis:

a:hover {
color: red;
text-decoration: none;
}

Ici pas de probleme sa marche mais pour mes images je doit faire comment ???

[coyote89]

Essaye ça, en mettant un lien avec la classe appelée "lienimage" autour de l'image en question.

Code: Tout sélectionner

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

[vincent.lepy]

Voici mon code de ma page CSS:

.lienimage img {
height: 100px;
width: 120px;
margin-top: 20px;
margin-left: 40px;
border:1px solid red;
text-decoration: none;;
}

.lienimage:hover img {
height: 100px;
width: 120px;
margin-top: 20px;
margin-left: 40px;
border:1px solid yellow;
text-decoration: none;
}

et voici le code de ma page ou se trouve les photos:

<?php
// insertion de l'entete.
include("entete.php");?>

<div class="lienimage">
<a href="images/charpente01.jpg" target="_blank"><img src="images/charpente01.jpg" width="65" /></a>
<a href="images/charpente02.jpg" target="_blank"><img src="images/charpente02.jpg" width="65" /></a>
<a href="images/charpente03.jpg" target="_blank"><img src="images/charpente03.jpg" width="65" /></a>
<a href="images/charpente04.jpg" target="_blank"><img src="images/charpente04.jpg" width="65" /></a>
<a href="images/charpente03.jpg" target="_blank"><img src="images/charpente03.jpg" width="65" /></a>
<a href="images/charpente02.jpg" target="_blank"><img src="images/charpente02.jpg" width="65" /></a>
<a href="images/charpente04.jpg" target="_blank"><img src="images/charpente04.jpg" width="65" /></a>
<a href="images/charpente01.jpg" target="_blank"><img src="images/charpente01.jpg" width="65" /></a>
<a href="images/charpente01.jpg" target="_blank"><img src="images/charpente01.jpg" width="65" /></a>
<a href="images/charpente03.jpg" target="_blank"><img src="images/charpente03.jpg" width="65" /></a>
<a href="images/charpente02.jpg" target="_blank"><img src="images/charpente02.jpg" width="65" /></a>
<a href="images/charpente04.jpg" target="_blank"><img src="images/charpente04.jpg" width="65" /></a>
</div>
</body>
</html>

[coyote89]

Et ça marche comme ça ?
Pour moi, il faut faire comme je t'ai montré : la fonction hover s'applique à un lien, donc à la balise "a".

[vincent.lepy]

Non désoler j'ai fais comme tu ma dit mais ca ne fonctionne pas. La couleur reste toujours la meme.

[coyote89]

Avec firefox, ça devrait marcher. J'essaierai aujourd'hui et je te confirmerai.

[gael49]

+1 avec Coyote, sa solution devrait fonctionner

IE n'accepte des "Hover" que sur la balise <A> si je ne me trompe, sur Firefox ça fonctionne normalement quelque soit la balise

[vincent.lepy]

C'est exactement se que j'allai demander. Il me semblai avoir vu sa sur un autre forum. Donc si je souhaite faire sa, je ne doit plus me servir de IE?

[gael49]

C'est exactement se que j'allai demander. Il me semblai avoir vu sa sur un autre forum. Donc si je souhaite faire sa, je ne doit plus me servir de IE?

Pas seulement toi, tous les utilisateurs de ton site, enfin ils ne verront pas la bordure sous IE, c'est pas la mort non plus
Tu rajoutes 1 logo Firefox avec un lien pour le télécharger en bas de page et hop !

[vincent.lepy]

c'est pas la mort non plus, je sais mais bon sa aurai permit de continuer dans le même esprit du site. Enfin merci de votre aide.

[gael49]

L'exemple de Coyote (hover sur les <a>) est compatible sur tous les navigateurs.

[vincent.lepy]

Pourquoi sa fonctionne pas chez moi alors ?? J'ai fait exactement comme Coyote ma dit, et rien.

[coyote89]

Le code html qui correspond à mon CSS, tu peux nous en montrer un bout ?
Je pense que tu appliques mal la classe lienimage.

[vincent.lepy]

Plus haut il y a le code de ma page CSS et le code de ma page ou se trouvent mes photos.

[coyote89]

Ok donc c'est ce que je disais, tu ne mets pas le bon html.
Voici un exemple qui fonctionne sous IE et firefox sans problème.
Et voici le code utile :

Code: Tout sélectionner

<style type="text/css">
   a.lienimage img {border:1px solid #f5a4dd;}
   a.lienimage:hover img {border:1px solid #000;}
</style>


Code: Tout sélectionner

<a class="lienimage" href="#"><img src="/images/test.jpg" alt="test" /></a>