sylvainsab a écrit :
Existe-t-il un CSS permettant d'afficher l'image en infobulle au survol du lien ?
Bonjour sylvainsab,
J'espère qu'il n'est pas trop tard pour vous répondre, mais je crois avoir la solution — ou tout du moins
une solution — à votre problème !
Olivier C a écrit :
La réponse est non. Il va falloir forcément du JS.
...et la bonne nouvelle, c'est que, contrairement à l'avis d'Olivier C, il n'est pas nécessaire d'utiliser du JavaScript : le CSS y suffit parfaitement !
Voici le code HTML :
Pour accéder à l'image, cliquez sur <a class="caché" href="pix/img.jpg">ceci cela<span><img src="lien_de_votre_image" ></span></a>. Survolez pour la visualiser.
Comme vous pouvez le constater, il faut un
span pour englober le texte à survoler ainsi qu'un deuxième
span à l'intérieur du premier pour insérer le contenu HTML que vous souhaitez faire afficher (dans votre cas, une image) : il peut s'agir de — presque — n'importe quoi !
Concernant le CSS, voilà la structure adéquate :
a:hover {
position: relative;
}
a span {
display: none;
}
a:hover span {
display: block;
z-index: 100;
left: 10px;
margin: 10px;
position: absolute;
}
Ainsi, le contenu à afficher est caché par défaut mais est rendu visible au survol du texte concerné. Après cela, un peu de mise en page pour le placer et le tour est joué !
Une précision quand même : l'attribut
z-index avec la valeur
100 permet d'être certain que le contenu à afficher sera toujours au-dessus des autres éléments de la page.
QuentinC a écrit :
en incluant bien sûr une alternative au focus pour ceux qui utilisent uniquement le clavier
Si vous souhaitez également faire fonctionner cela pour un clavier, vous pouvez recopier le code avec
hover en remplaçant
hover par
focus. Comme ceci :
a:focus{
position: relative;
}
a:focus span {
display: block;
z-index: 100;
left: 10px;
margin: 10px;
position: absolute;
}
QuentinC a écrit :
De façon plus générale, les effets de survol sont problématiques avec les écrans tactiles, vu que le concept de survol n'existe pas en tant que tel et qu'il est parfois simulé avec des combines un peu étranges.
Donc il faut les éviter ou proposer une alternative pour accéder à la même information.
En revanche, cette information reste factuelle : je vous conseille aussi de trouver une autre alternative pour la version mobile.
Alors, qui disait que c'était impossible ? Rien de bien sorcier !
En espérant ne pas vous avoir trop ennuyé avec tout mon discours
et surtout, en espérant avoir répondu au mieux à votre question, sylvainsab,
Je vous prie d'agréer l'expression de mes sincères salutations,
OeilDeLynx Modifié par OeilDeLynx (30 Aug 2024 - 15:22)