タグ別アーカイブ: スマホ

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

コメントをどうぞ

クリッカブルマップでareaをクリックしたらモーダルが開いて･･･てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ！動かない～～～！！！

iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ！！

てなことがあり、解決したので残しとく。

ｊQueryの書き方とかいろいろ試したけど、結局原因は以下でした。

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>

これで解決です！