iphone版Chromeだけクリッカブルマップがきかない

クリッカブルマップで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にちゃんと幅と高さを入れるだけで解決
▼以下が正解コード

&lt;img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"&gt;
&lt;map id="hoge" name="hoge"&gt;
  &lt;area shape="circle" coords="435,193,39" href="#" alt="りんご"&gt;
  &lt;area shape="circle" coords="369,296,38" href="#" alt="みかん"&gt;
  &lt;area shape="circle" coords="295,337,38" href="#" alt="いちご"&gt;
&lt;/map&gt;<map id="hoge" name="hoge">  </map>

これで解決です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>