Discussion :

[Ricou13]

Bonjour,

J'ai besoin de créer des liens avec une image (différente à chaque fois) et un texte. L'ensemble doit être réactif au passage de la souris.
J'ai donc créé :

Code :

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

1
2
3
4
5
6
7
8
9
10
HTML :
<a href="#" class="test"><img src="toto.jpg" width="20" height="20" border="1" /> Texte</a>
CSS :
a.test {
	border: 1px solid green;
	text-decoration: none;
	}
a.test:hover {
	text-decoration: underline overline;
	}

mais l'espace entre l'image et le texte recevait alors les attribut de surlignage.
J'ai donc ajouté un <span> autour du texte pour qu'il soit le seul concerné par le hover (déplacé sur le span seul) :

Code :

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

1
2
3
4
5
6
7
8
9
10
HTML :
<a href="#" class="test"><img src="toto.jpg" width="20" height="20" border="1" /> <span>Texte</span></a>
CSS :
a.test {
	border: 1px solid green;
	text-decoration: none;
	}
a.test:hover span {
	text-decoration: underline overline;
	}

Pas de pb sous FF mais sous IE, le hover ne fonctionne plus !

[koala64]

Salut,

Pour arriver à tes fins, tu dois combiner les deux techniques suivantes...

http://batraciens.net/css-astuces/bouton-1.htm
http://batraciens.net/css-astuces/aj...ge-de-fond.htm

@+ :o

[Ricou13]

Merci pour les liens, surtout celui sur les images adaptées à la taille d'un bloc. C'est une technique intéressante, l'autre lien étant basic.

Cependant, cela ne correspond pas à mon pb puisque :

1) mes images ne peuvent être définies en background
2) Je me suis peut être mal exprimé : les liens sont composés d'une image "et" d'un texte, pas d'une image "derrière" un texte.

[koala64]

Rebonjour! :o

Afin d'obtenir le résultat escompté, voici ma vision de la méthode à employer...

Tu utilises la technique de l'image qui s'adapte pour mettre ton image d'origine dans le div inférieur. Tu ajoutes ensuite ton texte dans le div supérieur.

Au survol, tu utilises la technique du bouton pour mettre une seconde image en background et ton texte souligné dans le div supérieur. Ainsi, seul le texte est affecté par le surlignage...

Ce n'est pas ce que tu cherches?

@+

[Ricou13]

La solution, telle quelle, ne convient pas car je ne veux pas que l'image se trouve derrière le texte mais à coté.

J'ai finallement trouvé une solution en me basant sur l'idée de l'image recouverte par un autre bloc :
Je place mon image et mon lien juste à coté. Puis je positionne le lien en absolute sur le coin supérieur gauche de l'image et je lui affecte un padding à gauche jusqu'à ce qu'il soit suffisament éloigné de l'image.
L'inconvénient est que je dois définir un div supplémentaire, le conteneur global, que je dois obligatoirement positionner.

Pas très puriste mais ça fonctionne.

Merci

[Ricou13]

Cependant, cela n'explique pas pourquoi le code initial, très simple au demeurant, ne fonctionne pas sous IE alors qu'il marche très bien sous FF.

De plus, je viens de me rendre compte qu'en affectant une règle bidon sur le a:hover, comme modifier la couleur du texte (inutile puisque le lien ne contient directement pas de texte), faisait fonctionner correctement le système.

c'est à devenir dingue si on doit créer des règles inutiles pour faire fonctionner des règles simples !

[koala64]

Mouais, on entre là dans les entrailles du css...

Bon, sinon, avec ce que je te proposais, il suffit dans ce cas, d'augmenter la taille de ton image en complétant par une zone transparente...