協業のお願い!ホームブログWebのことコードイメージマップのareaタグのリンクが効かない原因と確認事項2019/07/20ツイートシェアはてブPocketLINEイメージマップを使うと画像に簡単にリンクを付与することができます。このイメージマップのareaタグのリンクが効かない時の原因と確認事項をまとめました。目次イメージマップとは何か?イメージマップのareaタグのリンクが効かない場合mapタグが抜けているusemap属性とname属性が一致しない意図しないJavaScriptが起動しているイメージマップとは何か?イメージマップとは画像の上にリンクを貼り付けることができるHTMLのタグで、正式名称は「クライアントサイドイメージマップ」と言います。下の画像のように、画像の特定の範囲をリンクにできるので、地図などの画像に使われることがあります。使用したコードは以下の通りです。/></map>参考:<AREA>-HTMLタグリファレンスイメージマップのareaタグのリンクが効かない場合イメージマップではaタグを使わなくともareaタグがリンクを貼ってくれるのですが、そのareaタグのリンクが効かないことがあります。主な原因は以下3つです。mapタグが抜けているはじめに考えられるのがmapタグが抜けているという原因です。上記のサンプルコードにもあるように、イメージマップはimgタグだけでなく、areaタグとそれをマークアップするmapタグが必要になります。このmapタグが抜けているとareaタグも動かなくなるのでご注意ください。usemap属性とname属性が一致しない次にimgタグのusemap属性とmapタグのname属性が一致していないという原因が挙げられます。これらの属性が一致していないと、areaタグのリンクは効かなくなります。imgタグのusemap属性にはmapタグのname属性に入力した内容に#をつけて入力します。areaタグが効かないという時はこの平仄があっているか確認してみてください。意図しないJavaScriptが起動している上記2つの原因を確認しても問題が解決しない場合は意図しないJavaScript(以下、JS)が効いていないか確認してみてください。イメージマップはより見た目をよくする様々なJSがネット上で紹介されています。イメージマップではJSは使わないので、無駄なidやclassが付与されていないかご確認ください。