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