Changer la couleur d'un texte au survol d'une image

**asas-as** · 15/07/2014, 19h10

Bonjour,

J'ai besoin d'un peu d'aide.

J'ai fais cela en CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.Jaune:link{color: #ffff00;text-decoration:none;}
.Jaune:visited{color: #4682B4;text-decoration:none;}
.Jaune:active{color: #6acacd;text-decoration:none;}
.Jaune:hover{color: #87ceeb;text-decoration:none;}

et ceci en HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<p>
<br />
<a href="a.html"><img style="border-color: #2F4F4F" src="images/a.jpg" alt="a" title="a" />
 
<a href="a.html" class="Jaune">TEXTE LIEN
</p>

Donc j'aimerais que lors du survol ou click de l'image, le texte change de couleurs d'après le CSS.

En faite cette question à été posée ICI mais c'est l'application qui me pose problème.

Merci beaucoup, j'ai vraiment besoin de votre aide.

A bientôt !
Marc

**Bovino** · 15/07/2014, 19h30

Le code HTML de tes liens n'est pas correct...

**asas-as** · 15/07/2014, 20h25

Oui mais c'est pour cela que je vous les poste. Peux-tu m'aider s'il te plaît ?

**NoSmoking** · 15/07/2014, 21h59

Bonjour,
il t'appartient de fournir un code HTML CORRECT sans quoi tu pourras faire ce que tu veux de ton CSS, tu n’obtiendra rien de lui, même par la force.

De plus, suivant la structure du HTML la mise en oeuvre du CSS pourras être différente.

**asas-as** · 15/07/2014, 23h33

Bonjour,
Merci pour vos réponses.

Je demande juste un exemple pour modifier un texte à coté d'une image lorsque cette image est survolée. Pourriez-vous me montrer s'il vous plaît ?

Je vous remercie.

Un petit débutant

**asas-as** · 16/07/2014, 00h22

Bonjour,

Est-ce que quelqu’un pourrait m'orienter s'il vous plaît ??

Merci

**NoSmoking** · 16/07/2014, 22h05

Je te fourni un exemple, qui ne correspondra surement pas à ce que tu cherches, mais l'idée est là.

Je ne suis pas sûr non plus que tu vas tout comprendre attendu qu'il faudra que tu t'investisses un minimum dans les bases.

exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>:hover sur IMG</title>
<style>
img:hover ~ span{
  color:#F00;
  font-weight:bold;
}
</style>
</head>
<body>
<div>
  <img src="http://club.developpez.com/webdesign/Developpez.com/Boutons/bouton_logo_dev4.gif" alt="">
  <span>Tu texte qui va changer d'apparence au survol de l'image...</span>
</div>
</body>
</html>

**asas-as** · 16/07/2014, 22h19

Hello NoSmoking,

Merci beaucoup pour ton message.

Je vais essayer de l'intégrer à ma petite page et te redis avec grand plaisir !

Un grand merci pour ton exemple (c'est exactement ce qu'il me fallait) et les liens !

Il est vrai que je suis très débutant... Mais c'est aussi grâce à ton genre de réponse que je pourrai évoluer.

Avec mes salutations!
Marc

**asas-as** · 17/07/2014, 00h46

Alors j'y arrive seulement jusqu'au point ou il faudrait marier le css et le code que tu m'as proposé.

C'est exactement ce que je recherche mais j'aimerais juste que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.Jaune:link{color: #ffff00;text-decoration:none;}
.Jaune:visited{color: #4682B4;text-decoration:none;}
.Jaune:active{color: #6acacd;text-decoration:none;}
.Jaune:hover{color: #87ceeb;text-decoration:none;}

fasse référence pour tout.

Peux-tu me conseiller s'il te plaît ?

salutations.

Marc

**NoSmoking** · 17/07/2014, 20h09

C'est exactement ce que je recherche mais j'aimerais juste que :
...
fasse référence pour tout.

fin de journée surement mais je n'ai rien compris

**asas-as** · 17/07/2014, 23h27

Salut NoSmoking,

Pardon pour le manque de précision.
Est-il possible de reprendre mon CSS et qu'il soit actif dans ton code (au lieu du bold rouge)? Pour que cela soit plus interactif et facile lors de la navigation.
Exemple, en cliquant sur l'image et en faisant BACK, que le texte aie la valeur visited.

Vraiment que l'image et le texte soient couplés avec ce CSS (si il est potable):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.Jaune:link{color: #ffff00;text-decoration:none;}
.Jaune:visited{color: #4682B4;text-decoration:none;}
.Jaune:active{color: #6acacd;text-decoration:none;}
.Jaune:hover{color: #87ceeb;text-decoration:none;}