イメージマップのレスポンシブ対応と、iPhone の Chrome 対策

2014年10月19日 21:04

たとえばこんな HTML と CSS があるとしよう。

<body>
    <img src="hoge.png" usemap="#map_hoge">
    <map name="map_hoge" id="map_hoge">
        <area shape="poly" coords=" ... " href="fuga.html">
    </map>
</body>

img {
    width: 100%;
}

ブラウザの横幅が hoge.png の width と（たまたま）同じであれば問題ないのだが、基本的には異なってしまうため、area タグの coords 属性で指定した座標が本来の位置からずれることになる。ツイート中で紹介している jQuery RWD Image Maps は、まさにこの問題を解決してくれる jQuery プラグイン。使い方もこんなに簡単だ。

$('img[usemap]').rwdImageMaps();

あ、実際には jQuery 本体と jquery.rwdImageMaps.js（もしくは jquery.rwdImageMaps.min.js）を読み込み、$(document).ready() などを使って記述してください。

あと念のためフォローしておくと、前述の HTML と CSS を iPhone の Chrome でも正常に動作させるには、以下のようにすればいい（hoge.png の width と height が共に 600px という前提）。

<body>
    <img src="hoge.png" width="600" height="600" usemap="#map_hoge">
    <map name="map_hoge" id="map_hoge">
        <area shape="poly" coords=" ... " href="fuga.html">
    </map>
</body>

img {
    width: 100%;
    height: auto;
}