18081 sujets

Questions générales et questions de débutants

Rollover Image sans fond coloré

Apres de nombreuses recherches j'avais cru finir par trouver une solution a ce probleme mais finalement non ...
Tout simplement je met une couleur de background au rollover général comme ceci :

A:hover {BACKGROUND: #000000;COLOR: #FFFF00;FONT-SIZE: 12px;FONT-FAMILY: tahoma;TEXT-DECORATION: none;}

Et biensur qd un lien se fait sur une image le fond se colore aussi en noir et c tres laid sur les images a fond transparent meme avec ce code :

img,a img,a:visited img,a:hover img {BACKGROUND: none!important; border:0;}

Voici un exemple en ligne pour vous permettre de comprendre d'un coup le "bug" : http://www.plus2style.com/test.html

Je pensais ke ce probleme était résolu qque part parcekil est plutot courant de vouloir mettre un fond coloré sous un lien texte mais g pas vu exactement le probleme énoncé juska maintenant, c prkoi je me résouds a vous embéter ici avec ce truc si bête Smiley rolleyes

Merci de votre aide Smiley smile
ce qui faudrai que tu fasse c'est de refaire ton image avec le nouveau fond, comme cela, ca serai beaucoup plus beau car ton image n'est pas sur ton transparent
Aie donc il n'y a pas de solution tout simple pour ke seuls les liens textes reçoivent le fond coloré, et pas les image ?
Je voulais éviter de mettre une class sur chaque image et modifier ainsi des dizaines de pages a la recherche dimages ... c dommage ya des trucs tout simples ki ont pas été encore inventé en css on dirait Smiley eek
Bonjour, bonsoir,

Je pense que si tu lis ce tutoriel pour information et que tu mets en pratique celui-ci tu pourras aller plus loin avec ce que tu demandes...

Tu devrais en premier abord tirer quelque chose comme ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
<!--
a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #000000;
}
code, p code a {
	font-family: "Courier New", Courier, mono;
	color:#666666;
	background-color:#CCCCCC;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	background-color: #FF0000;
}
p code a:hover {
	text-decoration: underline;
	background-color: #FFFF00;
}
-->
</style>
</head>

<body>
<p><a href="http://users.skynet.be/digital-nation/blog/">Ceci est mon lien</a></p>
<p><code><a href="http://users.skynet.be/digital-nation/blog/">Ceci est mon lien en code</a></code></p>
<p><code>Ceci est <a href="http://users.skynet.be/digital-nation/blog/">mon autre lien en code</a>...</code></p>
</body>
</html>


Par après, tu pourras disposer les pseudo-classes (:hover, first-letter) etc... Pour avoir un résultat définitif... Tu pourras les appliquer séparément sur les classes, les ID, les balises, etc. Mais toujours penser à la "cascade".

Tu appliques le même principe sur la balise d'image et je pense que tu auras des résultats étonnant.

J'espère avoir pu t'aider.

G.

Edit : j'avais copié un mauvais code désolé...
Modifié par Groumphy (25 Nov 2005 - 13:08)
Sujet clos
Aller à