Discussion :

[solorac]

Bonjour la Communauté,

je voudrais savoir si il existe un moyen de mettre un commentaire d'une photo lorsque celle-ci est survolée.
Je m'explique : Cette photo est intégrée dans le header de mon site :

Code :

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

1
2
3
4
5
6
div#header{
	background-image:url('images/header2.jpg');
	background-repeat:fixe;
	width:897px;
	height:238px;
	}

et j'aimerai mettre un commentaire lorsque les visiteurs passent avec leur souris dessus.

Merci pour votre aide

[tibotibo69]

Tu peux faire comme ceci:

Code :

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

<img src="./monimage.jpg" title="texte_au_survol" />

Mais je ne pense pas que ça marche pour une background-image.

[HiRoN]

Bonjour,

Au vu de ce que tu dis, l'intégration de l'image en CSS n'est donc pas la bonne solution (car l'image est porteuse d'information et n'est donc pas simplement décorative).
Comme dis par tibotibo69, il faudrait l'incorporer via une balise img et ajouter un alt (voir title)...

[Damouille]

Ou sinon, un petit tooltip qui est stylable contrairement a la balise title

Code :

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

1
2
3
4
<a href="#">
<img src="./image.jpg" alt="description" />
<span class="tooltip">Tu peux mettre ce que tu veux ici, images, liens...</span>
</a>

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.tooltip {
display: none;
position: absolute;
width: 150px; /* Il faut une width sinon la boite prendra toute la largeur de la page*/
/* Ajoute ici le style de ta boite: padding, border, background....*/
}
a:hover .tooltip {
display: block;
}

[Macmillenium]

http://r-hunel.developpez.com/tutoriels/css/info-bulle/

[solorac]

Merci pour vos réponses. Je vais essayer le "tooltip" et je vous tiens au courant par l'icone résolu le cas échant ou par un autre post.

[solorac]

Bon et bien le code deDamouille ne m'affiche rien.
Mais rien du tout.
Pour ce qui est de l'info bulle je n'ai pas trop envie d'avoir le petit icone de l'info-bulle dans mon image, je sais que c'est le but, mais cela ne me plait pas vraiment.

J'attends vos remarques.
A+