クリッカブルマップでareaをクリックしたらモーダルが開いて・・・てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ!動かない~~~!!!
iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ!!
てなことがあり、解決したので残しとく。
jQueryの書き方とかいろいろ試したけど、結局原因は以下でした。
imgに幅と高さが指定されていない
これだけでした。
レスポンシブでCSSで幅を100%とかにしているため、画像自体には特に幅・高さを入れなかったのが原因。
▼以下がダメコード
<img alt="クリッカブルマップ" src="/images/areamap.jpg" usemap="#hoge" /> <map id="hoge" name="hoge"> <area alt="りんご" coords="435,193,39" shape="circle" href="#" /> <area alt="みかん" coords="369,296,38" shape="circle" href="#" /> <area alt="いちご" coords="295,337,38" shape="circle" href="#" /> </map>
それがimgにちゃんと幅と高さを入れるだけで解決
▼以下が正解コード
<img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"> <map id="hoge" name="hoge"> <area shape="circle" coords="435,193,39" href="#" alt="りんご"> <area shape="circle" coords="369,296,38" href="#" alt="みかん"> <area shape="circle" coords="295,337,38" href="#" alt="いちご"> </map><map id="hoge" name="hoge"> </map>
これで解決です!