faire apparaître du texte sous une image au passage de la souris

Version imprimable

Bonjour à tous,
J’aimerais faire une chose assez simple je pense, mais je ne vois même pas comment la chercher sur Google. J’ai déjà posté ce message dans la section CSS, mais en réfléchissant un peu je pense qu’il n’y est pas vraiment à sa place. :oops:
J'ai des images qui changent quand la souris passe dessus :
Code:

1 2 3 4 5 6 <a href="index.php?page=psyche" class="bouton"><img onMouseOver="this.src='img/psyche-but.jpg'" src="img/psyche-but-w.jpg" onMouseOut="this.src='img/psyche-but-w.jpg'" width="160px" class="img_bouton"></a>
(le CSS, à titre indicatif :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 a.bouton { font-size: 0px; color: #c31a30 } .img_bouton { border: 0px; } a.bouton:hover { font-size: 10px; text-decoration: none; }
J'en ai trois l'une à côté de l'autre comme ça.
J'aimerais que quand on passe la souris sur une image-lien, il y ait en plus un texte qui apparaisse en-dessous de celle-ci, une sorte de légende. Le code CSS que j'ai montré ci-dessus ne fonctionne évidemment pas : il place le texte à côté de l'image.
Auriez-vous des idées ?

Merci d'avance ! Et désolé pour le doublon... Si quelqu’un peut virer le quasi-jumeau de ce message dans la section CSS je pense que ça sera bien, non ?

Tiens j'ai bricolé une solution vite fait qui utilise le sélecteur d'éléments voisins, « ~ » :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Display dynamique en pur CSS</title> <style type="text/css"> body { font-family: tahoma, sans-serif; border-bottom: dashed thin silver; } div { width: 15em; margin: 1ex; padding: 1em; text-align: center; } div#red { background: #fc7; } div#green { display: none; position: relative; left: 4em; background: #cd7; } div#red:hover ~ div { display: inherit; } </style> </head> <body> <h1>Display dynamique en pur CSS</h1> <div id="red">Passez la souris là-dessus</div> <div id="green">Ceci devrait apparaître</div> </body> </html>
C'est un sélecteur relativement récent qui risque de ne pas fonctionner sous tous les navigateurs. L'autre idée, un peu moins élégante, est d'envelopper le tout dans un container, et d'utiliser un sélecteur dans le genre :

Code:

div#container:hover div { … }

Note qu’utiliser la pseudo-classe :hover sur autre chose qu'un lien écarte IE6 de la fête (ce qui, entre nous, n'est pas un mal).

;)

Bonjour,
Et merci ! Je suis très friand de ce genre de solutions "tout CSS", même c'est vrai que si ça écarte beaucoup de navigateurs, c'est un peu embêtant. En plus je ne connais pas du tout ce sélecteur d'éléments voisins ! Comment ça marche ?
De mon côté j'ai fini par trouver une solution, mais en JavaScript :
Code:

1 2 3 4 5 6 7 8 leg = { show: function(elem) { document.getElementById(elem).style.visibility = 'visible'; }, hide: function(elem) { document.getElementById(elem).style.visibility = 'hidden'; } }
Que j'appelle ensuite :
Code:

1 2 3 4 5 6 7 <a href="index.php?page=psyche" class="bouton"><img onMouseOver="this.src='img/psyche-but.jpg',leg.show('leg2')" src="img/psyche-but-w.jpg" onMouseOut="this.src='img/psyche-but-w.jpg',leg.hide('leg2')" width="160px" class="img_bouton"></a> <leg id="leg2">Psyché</leg>
Présentement je me demande si je vais pas faire des <div> à la place des <leg> (pour légende), ça me paraît un peu plus propre... Mais la question est aussi : est-ce que je vais mettre beaucoup de texte ou pas ?
Est-ce que cette solution vous paraît acceptable, d'un point de vue code ? Est-ce qu'elle fonctionnera sur la plupart des navigateurs ?
(Et puis franchement, IE6... On est pas à la version 8 ou 9 maintenant ? :roll:)

08/02/2011, 18h13
Watilin

Re,
<leg> n'existe pas en HTML donc tu n'as aucune garantie que tous les navigateurs acceptent de le manipuler comme tu le prévois. Mais avec un élément adapté comme <p> ou <span>, tu n'auras pas de problème.

Sinon le reste de ton code est bien, le JS est assez élégant. (Tu l'as trouvé sur le Caphar ? ^^)

À propos du sélecteur ~, c'est un sélecteur de CSS3 et, mea culpa, j’ai confondu avec le sélecteur + qui est plus répandu. Ils ont en gros le même effet si ce n’est que le ~ repère des éléments voisins en apparence alors que le + choisit les éléments qui se suivent dans le code source. Exemple :

Code:

a + em { … }

sélectionne les <em> qui suivent un <a>.

Maintenant j’utilise des <div> :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <a href="index.php?page=psyche" class="bouton"><img onMouseOver="this.src='img/psyche-but.jpg',div.show('leg2')" src="img/psyche-but-w.jpg" onMouseOut="this.src='img/psyche-but-w.jpg',div.hide('leg2')" width="160px" class="img_bouton"></a> <a href="index.php?page=pyrame" class="bouton"><img onMouseOver="this.src='img/pyrame-but.jpg',div.show('leg1')" src="img/pyrame-but-w.jpg" onMouseOut="this.src='img/pyrame-but-w.jpg',div.hide('leg1')" width="160px" class="img_bouton"></a> <div class="leg" id="leg1"> <h5>Pyrame</h5> blabla </div> <div class="leg" id="leg2"> <h5>Psyché</h5> blablabla </div>
Ça me permet d’avoir davantage de contrôle et au moins ce dont il s’agit est clairement défini.
Code:

1 2 3 4 5 .leg { position: absolute; top: 180px; visibility:hidden; }
Je ne sais plus où j’ai trouvé le code, sur internet quelque part. Je ne connais pas le site dont tu parles.

Très intéressants, ces sélecteurs CSS3... Quels navigateurs ne prennent pas en compte ça ? (Parce que pour mon site perso, un autre que j’ai fait, ça pourrait être bien...)

09/02/2011, 11h24
Watilin

Tout ton bonheur est ici : http://www.quirksmode.org/css/contents.html
;)