仮画像をホバーしたときにコンテンツを配信する

仮画像をホバーしたときにコンテンツを配信する

仮画像(サムネイル画像)をマウスオーバー(スマホではタップ)したときに,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

Powered by Helpfeel