「図の中の一部分をクリック(orタップ)すると新しくコンテンツを開く」という事項をなるべく簡単に実装する手段としてクリッカブルマップが候補に挙がりました。
が、iPhone(iOS12.1.2)でクリッカブルマップが押せない……！
そこで下記のような対策を講じてみましたが、いずれもダメでした……。
ちなみに、使用しているjQueryのバージョンは3.3.1です。
ここに関しては
クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログという記事に
rwdImageMaps自体が結構長い間メンテナンスされておらず、最新のjQueryで廃止された関数を使っていたりする
クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログ
という記述があり、この記事自体が2016/7/22のものなので、それは3.3.1では動かないだろうな、と。
念のためさらにいくつかの対策を追加で実施しました。
rwdImageMaps
デフォルトではjQueryとrwdImageMapsプラグインを読み込んだ上で
$(function() {
$('img[usemap]').rwdImageMaps();
});
とすれば良いのですが、いくつかの記事では
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
という書き方をしていたのでjQueryのイベントを見て何かするのかと思い(プラグインのコードを見る限りそんな感じはなかったですが)
$(function(e) {
$('img[usemap]').rwdImageMaps();
});
としてみましたが、効果なし。……うん、知ってた。
jMap
jMapは情報が少なかった(+他のものが多数出てきてググラビリティが低かった)ので、導入した後に動かないことを確認してすぐ次に移りました。
image-map-resizer
一番新しくメンテナンスされている(2/21時点で6日前(!)にGithubにプッシュされていた)ので、期待を込めて導入してみましたがダメでした。何故だ。
ついでにrwdImageMapsについて言われていたいくつかの対策をこちらにも実施
- px単位の
widthをcssで指定 - ※コードは下記
- jQueryの
width()やheight()メソッドでimgタグの表示時点での幅・高さを取得 attrメソッドを使って1.の値をimgタグにwidth, heightを指定- 2.と同様にjQueryの
cssメソッドでwidth, heightを指定
$(function() {
iMapResize();
});
$(window).on("resize", function() {
iMapResize();
});
function iMapResize() {
var imageMap = $("#imageMap");
imageMap.removeAttr("width").removeAttr("height").css({width:"auto",height:"auto"});
var w = imageMap.innerWidth();
var h = imageMap.innerHeight();
imageMap.attr("width", Math.floor(w)).attr("height", Math.floor(h)).css({width:w+"px",height:"auto"});
$("map").imageMapResize();
}
これでもダメでした。
色々コードを追って対策したり、cssでごにょごにょする時間はちょっとなさそうなので何か代替手段を探しましょうか……。
参考
jQuery-rwdImageMaps
jMap
image-map-resizer
アルム＝バンド