Q&A
画像に複数のリンクをつけるには，
html
1<img src="hoge.png" usemap="#mapa"> 2<map name="mapa"> 3<area shape="rect" coords="147,59,1678,159" href="/pattern"/> 4<area shape="rect" coords="395,165,887,380" href="/pattern#sentakugata"/> 5<area shape="rect" coords="916,166,1405,378" href="/pattern#kadaikaiketugata"/> 6<area shape="rect" coords="395,403,883,605" href="/pattern#teigigata"/> 7<area shape="rect" coords="920,398,1410,606" href="/pattern#fermigata"/> 8</map> -->
のようにできるのは分かります．
そして，レスポンシブ対応にするには，
というのを使うらしいですが，なんども試しましたが，レスポンシブ対応になりませんでした．
js
1https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js 2$(‘img[usemap]’).rwdImageMaps();
iphone11では正常にボタンを判定しますが，7ではうまくいきません．
JqueryrのrwedImageは，既に管理がされていない状態らしいので諦めようかと思っています．(JQuery3.3.1を使ってます)
今回，bootstrapのカルーセルスライダーの3枚目にこのような仕様を置きたかったのですが，
画像を上からimgタグとaタグとして書き,marginをとりましたが
スライダーの高さ1,2と合わなくて，スライダー時にズレが生じてしまいます．
皆さんはスライダーと画像リンク(複数)を一緒に使う場合はどのようにしているのでしょうか？
複数リンクを諦めるべきでしょうか．．．？
回答1件
0
確かに古い iOS で動かない問題があって放置されているようです。
https://github.com/stowball/jQuery-rwdImageMaps/issues/100
ここに挙げられている回避策は jQuery 3 用ではないため、別のものがいいのではないでしょうか？
確認できる環境がないため確実なことは言えませんが、たとえば Image Map Resize。
これは map を指定するという違いがあるので注意。
jQuery
1$('map').imageMapResize();
https://github.com/davidjbradshaw/image-map-resizer#jquery-usage
投稿2020/03/02 07:30
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。