クリカブルマップ(イメージマップ)を使うと、SafariやChromeではデフォルトで青い枠が表示されるが、
Edgeでは黒い点線
Firefox、IEでは表示されない
アンドロイドではオレンジ色に表示される。
各ブラウザのデフォルトが違うようで、困った!!
jQueryプラグイン
maphilight
を使う。
デモ
<script type="text/javascript" src="jquery.maphilight.js"></script>
$('img[usemap]').maphilight();
最初動かないので焦ったら、jQueryのバージョンが古いからかもしれないので、デモ通りに
jquery-3.4.1.min.js
にすると無事動く。
→jquery-1.11.2.min.jsでも動くことを後日確認
jquery.maphilight.jsの
345行目からが
スタイルの指定になっている。
参考にしたサイト
クリッカブル・マップ(usermap)を視覚化する
おまけ
枠線を消すだけならCSSで簡単
クリッカブルマップの枠線を消すには
area{
border:none;
outline:none;
}