仮画像をホバーしたときにコンテンツを配信する
仮画像(サムネイル画像)をマウスオーバー(スマホではタップ)したときに,SVGなどのコンテンツをオーバーレイして表示する.
iframe
で埋め込むよりも初回の読み込み量が少なく済む.
埋め込むものが画像なので,制限が少ない.
ifarme
を
Scrapboxに埋め込むことはできないが,サムネイル画像はいける.このサムネイルの上にメインコンテンツをオーバーレイすることは可能.
ifarme
をSlackに埋め込むことはできないが,サムネイル画像はいける.
外部
JavaScriptファイルとして配信することも可能だが,自分が管理するサイトでないと読み込めないのが難点
この仕組みを利用したもの
https://svgscreenshot.appspot.com/c/x/xxxx.png
のようなURLを持つサムネイル画像に対してSVGコンテンツをオーバーレイする.
一般化の案
任意のサムネイルURLに対して拡張する
https://example.com/<任意>/<オーバーレイするコンテンツの拡張子>/xxxx.png
https://example.com/<任意>/xxxx.<オーバーレイするコンテンツの拡張子>.png