Afficher une image en infobulle au survol d'un lien

<a class="caché" href="pix/img.jpg">ceci cela</a>

a.caché:hover ~href { display: block }

QuentinC a écrit :
Par contre, je me demande si ce serait faisable en pur CSS, sans JavaScript, avec les derniers sélecteurs qui ont été ajoutés à la norme, en incluant bien sûr une alternative au focus pour ceux qui utilisent uniquement le clavier.

QuentinC a écrit :

Non. L'attribut title ne permet que d'afficher du simple texte. IL n'y a ni retour à la ligne, ni mise en forme, ni image, ou, plus simplement, pas de HTML.
...
C'est une erreur courante que je croise malheureusement très régulièrement. S'il y a du HTML dans l'attribut title, les lecteurs d'écran qui le lisent vont lire le code HTML a l'état brut.

mdn a écrit :

Accessibilité

L'attribut title est très problématique pour :

Les personnes qui utilisent des appareils à interface tactile
Les personnes qui naviguent au clavier
Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles
Les personnes souffrant de troubles musculaires ou cognitifs.

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

a écrit :
La réponse est non. Il va falloir forcément du JS.

a écrit :
Pourquoi mettre du HTML dans la valeur d'un attribut ? Ça n'a pas de sens et c'est une belle erreur puisque le contenu ne sera pas rendu avec la mise en forme escomptée.

a écrit :
Si cet attribut est si mauvais, comment se fait-il qu'il soit généralisé sur tous les éléments HTML ? Or, il devrait dans ce cas être déprécié. Ce qui n'est pas le cas. Le but d'utiliser cet attribut est d'afficher simplement une infobulle.

a écrit :
Dans ce cas et en faisant simple, autant proposé un display none/block sur un élément infobulle et utiliser hover/focus sur l'élément appelant. Mais va falloir gérer les bords d'écran et lorsqu'il y aura un overflow hidden, ça va être sexy.

a écrit :

Au passage, la question est posée dans le forum général et non dans accessibilité. J'avoue que je serai tombé dans le panneau et je te remercie pour cette précision.

sylvainsab a écrit :
Existe-t-il un CSS permettant d'afficher l'image en infobulle au survol du lien ?

Olivier C a écrit :
La réponse est non. Il va falloir forcément du JS.

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.

a:hover {
	position: relative;
}
a span {
	display: none;
}
a:hover span {
	display: block;
	z-index: 100;
	left: 10px;
	margin: 10px;
	position: absolute;
}

QuentinC a écrit :
en incluant bien sûr une alternative au focus pour ceux qui utilisent uniquement le clavier

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.

gcyrillus a écrit :
En raccourcis, il serait possible de faire avec les variable CSS et un attribut style au moment de la création du lien...

a:hover::after {
  content: url(attr(href));
  position: absolute;
}

<a href="./mon-lien">mon lien <span><img src="./mon-image.webp" /></span></a>

a {
  position:relative;
}
a span {
  display:none;
  width:260px;
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
}

a span img {
  display:block;
  width:100%;
  height:auto;
}

a:hover span {
  display:block;
}

Pedrothelion a écrit :
Quelque chose comme ça non ?

https://codepen.io/julien_sgn/pen/eYwjzZL

sylvainsab a écrit :
Je cherche le code le plus simple/minimaliste possible.
En partant de:

<a class="caché" href="pix/img.jpg">ceci cela</a>

Existe-t-il un CSS permettant d'afficher l'image en infobulle au survol du lien ?
Quelquechose qui à ma connaissance n'existe pas mais ressemblerait à :

a.caché:hover ~href { display: block }

Je suppose que sans ajouter de balises (HTML) cela se fait en JavaScript mais mes compétences en webdev date d'avant la bulle du “freelance” ... merci

a:hover::after {content: src(attr(href));}