Show image on mouseover in Markdown

Question

I was wondering if it's possible at all to display a linked image in a tooltip/popover in vanilla or GitHub Flavored Markdown.

I imagine this would be helpful for showing linked images to simplify markdown length. Tappy comes to mind.

Answer 1

John Gruber's original Markdown

is two things: (1) a plain text formatting syntax; and (2) a software tool, written in Perl, that converts the plain text formatting to HTML.

It is firmly concerned with content, not presentation.

However, it supports inline HTML, so if you already have an image that you want to change and you're willing to write something like <img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" /> you should be able to make this work.

You can experiment with inline HTML to bring in external CSS or JS if you want a different effect.

GitHub Flavored Markdown is a different story. After HTML is generated from the Markdown input it

is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.

This process will almost certainly remove whatever mouseover technique you try.