「図の中の一部分をクリック(orタップ)すると新しくコンテンツを開く」という事項をなるべく簡単に実装する手段としてクリッカブルマップが候補に挙がりました。
が、iPhone(iOS12.1.2)でクリッカブルマップが押せない……!
そこで下記のような対策を講じてみましたが、いずれもダメでした……。
- jQuery-rwdImageMapsを導入→×
- jMapを導入→×
- davidjbradshaw/image-map-resizerを導入→×
ちなみに、使用しているjQueryのバージョンは3.3.1です。
ここに関してはクリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログという記事に
rwdImageMaps自体が結構長い間メンテナンスされておらず、最新のjQueryで廃止された関数を使っていたりする
という記述があり、この記事自体が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
を指定
- jQueryの
$(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
- jQuery-rwdImageMaps
- クリッカブルマップをレスポンシブ対応する jQuery | colored rhythm
- イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ | ホームページ制作 株式会社KOP
- クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログ
- レスポンシブクリッカブルマップが初回読み込み時に座標がずれる問題と解決方法 | サウウェブ
- jQuery RWD Image Mapsで、クリッカブルエリアがずれる
jMap
image-map-resizer
- davidjbradshaw/image-map-resizer
- Can not get links to work on mobile devices · Issue #45 · davidjbradshaw/image-map-resizer
- 「iPhoneで動かないよ><」「バージョン1.0.7で直した」っていうやり取りが見えて、今回1.0.9を入れたのですが……何故かダメでした
- Can not get links to work on mobile devices · Issue #45 · davidjbradshaw/image-map-resizer
- image-map-resizer – npm