Discussion :

[berti]

Bonjour à tous,

je n'arrive pas à trouver comment je pourrais sur un lien afficher une image genre :

Code :

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

<a href="http://www.monsite.fr" target="_blank" class="lien" alt="info bulle">www.charente-limousine.fr</a>

mais à la place de alt="info bulle" je puisse afficher une image de petite dimension.

Avez-vous une idée ?

[Dsphinx]

Pour mettre un lien sur une image, tu dois utilser 2 balises A pour le lien et IMG pour l'image ! Dans l'attribut src de la balise image, tu mets le chemin de ton image ainsi que son nom :

Code :

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

<a href="http://www.monsite.fr" target="_blank" class="lien" alt="info bulle"><img src="dossier/ton_image.jpg"></a>

[berti]

ce n'est pas ça. Ce que tu me mets comme code ne va pas. Ca affiche une image dans une page auquel on lui attribut un lien

Ce que je veux faire c'est affiché une image comme une info bulle sur un lien texte

Est-ce que tu vois ce que je veux faire ?

[Strix]

Salut

Je crois que berti parle de tooltip
Un exemple : http://lixlpixel.org/css_tooltip/
Tu n'auras qu'à remplacer le texte par une image

[Dsphinx]

Ah oui ok ! L'inverse enfait !

Pour afficher que du texte tu mets l'argument TITLE dans la balise A: TITLE="ton texte"

Et pour afficher une image sur un lien (genre info-bulle), je passerais par du Javascript : afficher automatiquement des informations sur les élements d'une page en info-bulle (sources Javascript)

[HiRoN]

J'ai essayé de me créer un exemple en fonction du lien que donne Strix.

Dans la page HTML :

Code :

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

<a href="http://test.com/" class="tip" title="">Lien<span>tooltip</span></a>

Dans le CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
a.tip span
{
	background-image: url(images/ton_image.JPG);	/*Lien image*/
	display: none;	/*Cacher*/
	width: 351px;	/*Taille image*/
	height: 114px;	/*Taille image*/
	color: #fff;	/*Cacher "tooltip" en le mettant en blanc*/
}
 
a:hover.tip span 
{
	display: block;	/*Spécifie le bloc*/
}

Marche parfaitement sous IE et firefox.
Seul petit bug sous IE, malgré le fait que "tooltip" soit mis en blanc afin de le cacher, on voit quand même sous IE le "souslignage".

Encore merci à Strix pour ce lien...