社内のWebページをMicrosoft Edgeを使って確認していて、画像ファイルにマウスカーソルがかかると画像の右上にカメラのアイコンが出ることに気づきました。調べてみると画像のホバーメニューというやつで、主に類似の画像検索などへのショートカットとなっており、だいたい1年前ぐらいから機能として存在していたとこと。ふだんはChromeで作業しているので気づきませんでした。
ホバーメニューが出ない画像もあるのですが、社内向けのしかもSVG画像とかにも出て、これで画像検索として社外に情報が出ていくのもよくないな。ということで無効化の方法を探しました。
Googleで探すとEdgeの設定でというものばかりで、それは使ってれば分かるレベルの内容で、翻訳のコピーのコピーみたいな役に立たないページが大量に出てきます。いやいや、昔のIEでイメージツールバーという前科があるのだから、今回も似たような方法。<meta http-equiv="Imagetoolbar" content="no"> のようなhtmlソース側で一律禁止にする方法があるだろうと、英語で検索して以下のページが見つかりました。
CSSでimgに
img {
pointer-events: none;
}
と設定すればいいようです。pointer-eventsですがこちらの解説によると要素に対するポインターの振る舞いを制限するようで、imgタグに設定すると画像に対するクリックやドラッグなどが無効になってしまう副作用があります。ただやってみたところ、純粋にimg要素だけに適用されて、それを囲うdivやaに関しては問題なくクリック、ドラッグできました。
画像のホバーメニューだけを出さなくする他の方法が見当たりませんので、とりあえずこのCSS設定を追加しておきました。
