画像内にリンクを付けることができる、非常に便利なクリッカブルマップ。そんなクリッカブルマップについて、私つい最近まで勘違いをしておりました。なんてこったい( ﾟДﾟ)
その勘違いのせいで、IEで正常にクリッカブルマップが動作しないという事態に陥ったので、その時の対処法、というか正しいクリッカブルマップの書き方について紹介したいと思います。
IEでクリッカブルマップが効かないという状況になったら、一度確認してみてください。意外と私と同じように勘違いしているかも・・・
Internet Explorerでクリッカブルマップが効かない時の対処法
まずは間違った例をどうぞ。
<img src="sample.jpg" alt="サンプル" usemap="map1"> <map name="map1"> <area shape="rect" coords="58,113,228,227" href="https://techmemo.biz"> </map>
どこが間違っているかわかりますか？これでもGoogle ChromeやFirefoxでは、ちゃんと機能するんですよね。でもIEではクリッカブルマップが効きません。
どこが間違っているかというと、usemapの指定方法です。値には適用したいmapのname属性を入れますが、この時に先頭に#(シャープ)を入れないと、IEでは機能してくれません。
恥ずかしながら、つい最近までusemapの値は#なしで記述するものだと勘違いしておりました・・・たぶんHTMLの勉強を始めた頃に見たサンプルが#なしになっていて、それで覚えたんでしょうね。
そんなわけで、正しい例をどうぞ。
<img src="sample.jpg" alt="サンプル" usemap="#map1"> <map name="map1"> <area shape="rect" coords="58,113,228,227" href="https://techmemo.biz"> </map>
これでIEでもちゃんと機能します。IE8でもしっかりクリックできました。
あとがき
W3CのHTML5日本語訳でも確認してみましたが、例ではusemapの値にしっかり#が入っていました。やはりこちらが正しい記述法みたいですね。
他にも間違って覚えているものがありそうで怖いです。