業務中に１枚の画像の中に複数のリンクを貼らなければならない案件が発生しました！
はじめてのことだったので、全く意味がわからず、「そんなことできるの？？？なにそれ？？？」状態でした。とりあえず、調べて実装できましたので、記録として残しておきます。
最初に言っておくと、画像に複数のリンクを貼ること？をイメージマップというそうです。
通常通り画像にリンクを貼る場合
通常通りに貼る方法は、基礎中の基礎なので、新ためて記述する方法はないかもですが、一応。
See the Pen Untitled by 1buk1 (@1buk1) on CodePen.
通常どり、aタグの中にimgタグなど、リンクを貼りたい要素を入れてあげればOKですね！
複数リンクを貼る方法
さて、ここからが本題！
前述した方法では、画像（要素）１つに対してリンクは１つです。
しかし、以下の方法を利用することで、１つの画像（要素）に対して複数のリンクを貼ることができます。詳しくは、デモサイトを見てください！
デモサイトを見てもらうと分かりますが、１枚の画像に対して複数のリンク先が貼られていたかと思います。
mapタグと、usemap属性を使用して、画像とリンクを紐づける。
上記の方法は、至ってシンプルで特定の場所に、特定のリンクを貼るという単純なものになります。
See the Pen クリッカブルエリア by 1buk1 (@1buk1) on CodePen.
（すいません。画像が表示されていませんが、コードだけみてください。）
イメージマップジェネレーターを使って、画像の座標を取得する。
お気づきの方もいるかもしれませんが、これは画像の特定の位置にリンクを貼るので、画像の特定の位置をHTML内で指定してあげる必要があります。
<area shape=”rect” coords=”1074,7,1381,71″ href=”#” alt=””>
coords=”1074,7,1381,71″で座標を指定しています。
これは、手動で行うわけではなく、以下のサイトを使用すると簡単にできます。
使い方を簡単に説明しておきます。
- リンクを貼りたい画像を、ドラッグ&ドロップ
- リンクを貼りたい場所をサイト内の機能を使って指定。
- 全てのリンク先を指定できたら、生成されたHTMLをコピーして、ファイルへ貼り付ける。
以上、簡単ではありますが手順です。
この方法を使えば、自分でHTMLを記述することもなく、簡単に画像の中に複数のリンクを貼ることができます。
また、複数のリンクを貼るだけでなく、特定の場所にリンクをはれるので、意外と色々なところに使えたりします。
レスポンシブには対応していない。
イメージマップジェネレーターで、１枚の画像の特定の場所にリンクを貼ることができました。
必要であれば、複数のリンクも貼ることができます。
ただ、この方法はレスポンシブに対応していないんです。
画像のサイズが変わると、リンク先がずれる、もしくは座標を見失ってしまい、機能しません。
なので、対応させる方法をご紹介しておきます。
レスポンシブさせるには、jsを使用する
js！っていうと、「めんどうじゃないの？？？」って思いますよね。
実際、私もそうです。細かい設定をして〜とか。
でも、この方法は大丈夫です！！！
読み込ませて、使用する宣言をするだけで使えます。
image-map-resizerの設置 / 使い方
使い方は、簡単です。
- image-map-resizerの読み込み
- imageMapResize();を</body>タグ直後に設置。
本当にこれだけです！
image-map-resizerの読み込みは、以下の方法があります。
CDNが楽なので、私はCDNを使いました。
そうしたら、あとは</body>タグのあとに、imageMapResize();と記述するだけ。
（別ファイルから読み込ませても動くとは思います。が、必要ないページで不要なjsが動くのはあまりよろしくないので、必要なページのみに記述するのがいいと思います。）
デモサイト
簡単ですよね。私も最初は半身半疑でしたが、ちゃんと動作しました。
jQueryの同じものもあるが、動作が不安定。
私は、これでもハマったんですが・・・
前述したものの他にもレスポンシブ対応させるために、「jQuery」を使用したものもあります。
そちらも使ってみましたが、jQueryのバージョンによって、動作が不安定だったり、最悪動かないこともあります。
安定して動作したのは、前述したものでした。
まとめ
今回は、html画像に複数リンクを貼る方法を紹介しました。
レスポンシブに対応させる場合は、jsまで必要ではありますが、読み込ませて宣言する。だけなので、簡単です。
私も最初は、あまり使わなそうだな。と思いながら、作業をしていましたが案外そうでもありませんでした。
知識の一つとして頭に入れておいて損はない技術だと思います！