Couleur bordure hyperlien

Résolu
erialc452 -  
 erialc452 -
Bonjour,

J'ai utilisé une image comme hyperlien et j'y est ajouté une bordure. Ainsi la bordure est bleu, couleur normale d'un hyperlien. Mais j'aimerais changer la couleur de cette bordure et qu'elle change encore de couleur au survol de la souris dessus. Il me faut juste la "formule" de changement de couleur soit dans la balise d'image soit dans le css.
A voir également:

24 réponses

erialc452
 
Oui tout marche sauf le "actif". Si je change n'importe quel couleur pour les 3, ça marche.
1
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

a:link img{border-color:#000000;} /* apparence par défaut */
a:visited img{border-color:#FF0000;} /* page déjà visitée */
a:hover img{border-color:#00FF00;} /* survol */
a:active img{border-color:#0000FF;} /* bouton enfoncé au moment du clic */

et il faut respecter l'ordre !
0
erialc452
 
On le met bien dans le css ? Je ne sais pas quoi mettre devant : div#contenu a:hover img... par exemple ou autre chose ? On regroupe ces 4 propriétés dans un seul div ? J'ai essayé de les séparer, j'ai fait :
div#contenu a:link img
{
color: #6E46B9 ;
}

div#contenu a:visited img
{
border-color:#FF0000;
}

div#contenu a:hover img
{
color: #edd7ff ;
}

div#contenu a:active img
{
border-color:#0000FF;
}

Ca n'a pas marché donc je n'ai pas dû faire comme il fallait.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
j'aimerais changer la couleur de cette bordure
et en utilisant la propriété {border-color} ça irait peut être mieux, nan ?
-;o)
div#contenu a:link img
{
color: #6E46B9 ;
} 
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
erialc452
 
Ba c'est ce que j'ai fait, non ?
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
et ben même en le soulignant tu l'vois pas !
-:oD
donc compare ça : border-color
et le texte souligné dans ton code :
div#contenu a:link img
{
color: #6E46B9 ;
}

div#contenu a:visited img
{
border-color:#FF0000;
}

div#contenu a:hover img
{
color: #edd7ff ;
}

div#contenu a:active img
{
border-color:#0000FF;
} 

i'manquerait pas le "border-" par hasard ?
0
erialc452
 
Comment on souligne dans le browser? Si je met border-color je le souligne quand même ?
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
mais tu le fais exprès ou quoi ?

dans ta putain de règle tu as codé COLOR, c'est la couleur de premier plan, pas celle de la bordure :
div#contenu a:link img
{
color: #6E46B9 ;
}

il faut coder BORDER-COLOR pour changer la couleur de la bordure.
donc tu dois marquer ça :
div#contenu a:link img
{
border-color: #6E46B9 ;
}

ça veut pas dire que ça fonctionnera mais au moins ce sera juste.
0
erialc452
 
ok je viens juste de comprendre : non même si je le rajoute, ca marche pas.
0
erialc452
 
oui j'ai compris maintenant mais j'avais déjà réparé l'eurreur c'est pour ça. Donc même en rajoutant border devant ça marche pas.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
donc maintenant il doit rester un problème de sélecteur ou de priorité.

as-tu une version en ligne ?

si non, il faut nous dire dans quelles balises sont incluses tes images.
0
erialc452
 
non je ne l'ai pas mise en ligne donc :

<div id="contenu">
<p><a href="...........jpg"><img style="float: left;" src="...........jpg" border="3" align="texttop"></a>
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

div#contenu p a:link img
{
border-color: #6E46B9 ;
}

ça devrait fonctionner.

on va faire un essai avec autre chose, ajoute ça à ta CSS :
div#contenu p
{
background-color: red;
padding:20px;
}

et dis nous si tu vois le passage au rouge.
0
erialc452
 
Le fond rouge apparaît mais la bordure ne change toujours pas de couleur.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
donc on cible bien le paragraphe ce qui veut dire que ça c'est correct :
div#contenu p a:link img

le problème vient donc d'ailleurs…
je pense que c'est un problème entre visité ou pas.
on va faire un autre test, ajoute ça tout à la fin de ta CSS :
div#contenu p a:link img,
div#contenu p a:visited img,
div#contenu p a:hover img,
div#contenu p a:active img,
{
border-color: red ;
}
0
erialc452
 
J'ai essayé et ça marche : le cadre est rouge tout le temps mais ça a changé la mise en forme du texte : hauteur de ligne trop grandde et le texte n'est plus justifié.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
bon donc tu mettra ça :
div#contenu p a:link img{
border-color: red ;
}
div#contenu p a:visited img{
border-color: red ;
}
div#contenu p a:hover img{
border-color: red ;
}
div#contenu p a:active img{
border-color: red ;
}

et tu changeras couleur par couleur et tu testeras entre chaque.

pour les autres modifs, tu as dû laissé le premier test, il faut le virer.
et mets le code des liens en derniers, ça évitera qu'ils soient écrasés par une autre règle.
0
erialc452
 
ca marche uniquement si je change toutes les couleurs : tout en rouge ca marche, tout en bleu aussi mais si je change une couleur, cette couleur ne s'affiche pas.
0
erialc452
 
J'ai vérifié : c'est le div#contenu p a:active img
{
border-color: #edd7ff ;
}
qui change la couleur. Je l'ai enlevé et il n'y a plus de problème ça marche correctement.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
fais-tu la différence entre lien visité ou pas visité ?

si tu n'as jamais été sur la page cible du lien, la couleur utilisée est celle de "visited", sinon c'est de "link".

et le "hover", il fonctionne avec une autre couleur ?
comme ça par exemple :
div#contenu p a:link img{
border-color: red ;
}
div#contenu p a:visited img{
border-color: red ;
}
div#contenu p a:hover img{
border-color: green ;
}
div#contenu p a:active img{
border-color: red ;
}
0