couleur bordure hyperlien Résolu/Fermé

Question

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.

Dalida · Answer

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 !

erialc452 · Answer

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.

Dalida · Answer

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 ;
}

erialc452 · Answer

Ba c'est ce que j'ai fait, non ?

Dalida · Answer

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 ?

erialc452 · Answer

Comment on souligne dans le browser? Si je met border-color je le souligne quand même ?

Dalida · Answer

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.

erialc452 · Answer

ok je viens juste de comprendre : non même si je le rajoute, ca marche pas.

erialc452 · Answer

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.

Dalida · Answer

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.

erialc452 · Answer

non je ne l'ai pas mise en ligne donc :

Dalida · Answer

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.

erialc452 · Answer

Le fond rouge apparaît mais la bordure ne change toujours pas de couleur.

Dalida · Answer

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 ;
}

erialc452 · Answer

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é.

Dalida · Answer

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.

erialc452 · Answer

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.

erialc452 · Answer

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.

Dalida · Answer

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 ;
}

erialc452 · Answer

Oui tout marche sauf le "actif". Si je change n'importe quel couleur pour les 3, ça marche.

Dalida · Answer

"active" est particulier, c'est au moment au tu cliques, plus précisement quand tu enfonces le bouton gauche de la souris.

pour le voir il faut cliquer et laisser le bouton enfoncé.

erialc452 · Answer

Oui il y a seulement le "actvie" avec lequel on ne peut pas changer de couleur sinon il prend le dessus sur les autres, et par exemple si je met la couleur rouge pour tous et juste pour "active" je met du bleu, la bordure restera toujours bleu(link, hover et visited). Je l'ai enlevé et la couleur du active est par défaut la même que celle de link.

Dalida · Answer

salut,

donc ton problème est résolu ou pas ?

erialc452 · Answer

Oui c'est bon, merci.

Couleur bordure hyperlien

24 réponses

Discussions similaires