faire apparaître du texte sous une image au passage de la souris [Résolu]

Celadon · 08/02/2011, 12h41

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.

J'ai des images qui changent quand la souris passe dessus :

Code :

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

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 :

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

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 ?

Watilin · 08/02/2011, 16h16

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

Code HTML :

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

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 CSS :

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

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).

Celadon · 08/02/2011, 16h28

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 :

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

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 :

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

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 ?

)

Watilin · 08/02/2011, 18h13

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 CSS :

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

a + em { … }

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

Celadon · 09/02/2011, 10h48

Maintenant j’utilise des <div> :

Code :

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

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 :

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

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...)

Watilin · 09/02/2011, 11h24

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

08/02/2011, 18h13	#4
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part a + em { … } sélectionne les <em> qui suivent un <a>. __________________ Disposition de clavier ergonomique française : Bépo
	00

09/02/2011, 11h24	#6
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	Tout ton bonheur est ici : http://www.quirksmode.org/css/contents.html __________________ Disposition de clavier ergonomique française : Bépo
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email