Bonsoir,

Alors voilà, je suis un débutant en HTML/CSS, j'aimerai pour la présentation d'un site, pouvoir faire un effet de fondu d'une couleur A vers une couleur B pour un peu plus d'esthétisme.

j'ai plusieurs liens dans mon code comme :

<A class="label" href="Label_MUNARO.html">LABEL</A>
					<A class="artistes" href="Artistes_MUNARO.html">ARTISTES</A>
					<A class="multimedia" href="Multimedia_MUNARO.html">MULTIMEDIA</A>
					<A class="ceo" href="Ceo_MUNARO.html">CEO</A>
					<A class="seoul" href="Seoul_MUNARO.html">SEOUL</A>
					<A class="avis" href="Avis_MUNARO.html">AVIS</A>

pour faire mon effet Fade entre mes couleurs j'ai écris dans mon fichier CSS :

.label:hover, .artistes:hover, .multimedia:hover, .ceo:hover, .seoul:hover, .avis:hover, .FB:hover
{
	animation: fadeIn 0.6s;
	color: #51B4ED;
}
@keyframes fadeIn
{
	from
	{
		color: #9F9F9F;
		opacity: 1;
	}
}

Du coup, j'ai un super effet fadeIN, mais dès que ma souris quitte l'un de mes liens la couleur redevient celle de base brusquement sans fade.
J'ai essayé de faire une "animation: fadeOut 0.6s" avec un "@keyframes FadeOut" mais ça ne marche pas...

De plus, j'ai aussi dans mon code des images mappé comme celle ci :

<MAP name="facebook">
						<AREA shape="rect" coords="12,12,55,45" href="https://www.facebook.com/smtown/" alt="FB"/>
						<IMG class="FB" src="iconeFB1.png" height="60" width="60" usemap="#facebook" alt="logo"/>
					</MAP>

du coup je voulais faire exactement la même chose en mettant dans mon CSS ".FB:hover" comme ci dessus mais la couleur de mon image ne change pas (alors que celle des mes liens oui)..

Avez vous une piste ? Je déprime de ne pas trouver depuis tout ce temps

Cordialement !

Bonjour,

si tu veux juste changer la couleur en fondu, transition suffit, pas besoin d'animation. Tu définis une couleur sur tes liens, une autre couleur dans leur version hover, et tu ajoutes transition: color .6s; sur les liens (pas sur le hover).

En revanche, pour le map… c'est beaucoup plus compliqué. Et je ne suis même pas sûre que ce soit possible - surtout si c'est la couleur-même de l'image que tu veux changer. Il nous faudrait plus d'info, par exemple une page en ligne et un schéma de ce que tu veux obtenir. Mais au vu du code de ta map, tu en as vraiment besoin ? Pourquoi ne pas mettre ton image dans un simple lien ?

Bonjour,

Tout d'abord merci pour ta réponse c'est très sympa,

j'ai effectivement remplacé dans mon CSS "animation" par "transition" ce qui donne pour les liens hypertexte :

.label:hover, .artistes:hover, .multimedia:hover, .ceo:hover, .seoul:hover, .avis:hover
{
	color: white;
	transition: .6s;
}

c'est plus clair, plus simple et plus instinctif, au final, le rendu est le même mais je ne pense pas qu'on puisse faire mieux donc c'est parfait comme ça ! 

En revanche, pour mes images mappé, j'ai essayer de les passer simplement dans un lien comme

"<A class="facebook" href="mon lien"> <IMG src ="mon image"/> </A>

puis de rappeler .facebook dans le même CSS que ci-dessus, et malheureusement cela ne marche pas non plus, je pense que je dois faire appel a du JavaScript pour pouvoir obtenir le même effet que sur les liens hypertexte mais pour des liens dans une image..(de plus, j'ai besoin de garder mes images mappé et non des liens/images seuls car ma prof l’exige dans son cahier des charges ! pas de chance !) 

Merci en tout cas pour ton aide c'est très sympa, je vais essayer de potasser mes cours de JS, mais je reconnais ne pas comprendre grand chose à ce langage ^^ 

Cordialement :) 

Je t'ai dit "pas dans le hover", la transition comme tu l'as mis actuellement, l'effet ne se fera qu'au "retour".

Pour les images avec lien, tu cherches à changer la couleur à l'intérieur de l'image ? Si oui, intéresse-toi aux polices d'icônes comme FontAwesome, ça pourrait correspondre à ton besoin.

Mince, j'ai mal lu, effectivement j'ai corrigé mon erreur et effectivement ça marche super bien ! 

Pour le reste, dans l'idéal, je cherche à colorer l'intérieur de 3  images mappé au passage de la souris (exactement comme pour mes liens hypertexte).

A coté des mes liens hypertextes j'ai 3 petites icônes respectivement de Facebook, Twitter et Youtube et je veux les colorer au passage de la souris, bleu pour Facebook et Twitter et rouge pour Youtube, je vais regarder FontAwesome et prier pour que ma prof me laisse utiliser cette ressource, c'est pas toujours évident avec elle

En tout cas merci beaucoup pour ton aide, je vais chercher de mon coté, si je trouve je viendrai poster ma solution ici pour ceux qui en on potentiellement besoin !