ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【HTML】イメージマップで画像に複数リンクを設置する方法【レスポンシブ対応化能】

HTML
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

一枚の画像にアイテムがいくつかあって、それぞれに別々のリンクをつけたい!

初心者向けに一枚の画像に複数リンクを設置する方法を分かりやすく解説してほしい!

今回の記事では、初心者の方でも分かりやすいように、イメージマップを用いた、一枚画像に複数リンクを設置する方法を解説していきます!

↓ イメージとしてはこのような感じです! (観葉植物とメモ帳に別々のリンクを設置)↓

このように一枚の画像を分割できなくて、画像内で別々のリンクを設置したい時に「イメージマップ」と呼ばれるHTMLの用法を使い実装します。

この記事を読むとできること
  • 一枚の画像に複数のリンクを設置できるようになる
  • レスポンシブでも上記同様の挙動ができる
スポンサーリンク

イメージマップで画像に複数リンクを設置する方法

今回の例として、この一枚の画像に青と赤の領域に、別々のリンクを設置したいと思います。

画像に複数リンクを設置する 流れ
  1. <img>で画像を挿入
  2. ImagemapGenerator でイメージマップの作成
  3. コードをコピーして貼り付け
  4. jQueryのプラグインを使用しレスポンシブ対応

基本的にはこのような流れになります。

ちなみに完成形のソースコードはこちらです!

<img src="images/leaf-3162421_1280.jpg" usemap="#ImageMap">
<map name="ImageMap">
 <area shape="rect" coords="110,70,347,529" href="https://ja.wikipedia.org/wiki/観葉植物" target="_blank">
 <area shape="rect" coords="414,170,661,531" href="https://ja.wikipedia.org/wiki/メモ帳" target="_blank">
</map>

このコードを手動で書くこともできますが、coordsの座標指定の部分が目視では確認できないので、ImagemapGenerator を使ってコードを自動生成する事をオススメします!

イメージマップ ソースコードの解説
  • usemap=”#mapの名前(自由)”:イメージマップを付与したい画像に指定します。
  • <map name=”ImageMap”>:nameにはusemapの名前と同じ名前を書く
  • <area>:リンクを設置する範囲・リンク先を指定
  • shape=”選択範囲の形を指定”「rect(四角形)circle(円)poly(多角形)」で指定
  • coords=”座標の指定”

1.<img>で画像を普通に挿入

まず始めにいつもの通りに、<img>タグを使って複数リンクを設置させたい画像を挿入していきます。

<img src="images/leaf-3162421_1280.jpg" usemap="#ImageMap" alt="観葉植物とメモ帳">

ポイントとしては、<img>タグの中に、usemap=”#mapの名前”を好きなように指定して下さい!

スポンサーリンク

2. ImagemapGenerator でイメージマップの作成

次にImagemapGenerator を使って、イメージマップのコードを自動生成します

まずは、 ImagemapGenerator にアクセスします。

「ここに画像をドラッグしてください」と画面が表示されるので、複数リンクを設置する画像をドラッグ&ドロップして読み込みましょう!

すると、このように画像と、ソースコードが表示されているのが分かると思います。

  1. 右上のメニューから好きな形状をクリック
  2. 画像の上でドラッグして、リンクを設置させたい範囲を選択
  3. HTMLコードが自動生成される

この手順で、メモ帳も同じように範囲選択してHTMLコードを自動生成します。

そして、生成されたコードを自分のエディタに貼り付ければ完成です!(PCのみ)

3.画像の複数リンクレスポンシブ対応させる

このままでは、画像のスマホ表示の際に画像の大きさが変化するので、指定した領域でリンクが設置できていません。

なので、画像が拡大縮小した際に、イメージマップの範囲も拡大縮小されるようにする必要があります。

やり方はとっても簡単で、jQueryの「jQuery RWD Image Maps」と呼ばれるプラグインを使用すればOKです!

GitHubはこちら

CDNはこちら

ネコ君
ネコ君

jQueryって何?知らないんだけど!

Hiko
Hiko

jQueryの知識がない方でもできるように、コピペで実装できるように解説しますね!

↓このコードを<head>タグ内にコピペ!↓

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js" integrity="sha256-MV/L2nrfaNYQUtnDja7Ok3sF1D5Rpviw/MUs76PX9nE=" crossorigin="anonymous"></script>
</head>

↓このコードを</body>の前にコピペ↓

<script>
$('img[usemap]').rwdImageMaps();
</script>
</body>
</html>

これでレスポンシブでもイメージマップで画像に複数リンクが正しく設置できるようになっていると思います!

レスポンシブで正しい位置にリンクが設置できていない場合は、画像の大きさに問題があるので、width:100%; height:auto; などCSSを編集してみましょう!

イメージマップで画像に複数リンクを設置する方法 まとめ

ネコ君
ネコ君

これで、どんな画像でも沢山リンクを設置できるようになるね!

いかがでしたでしょうか!

画像を分割できない際には、このイメージマップという方法を用いて、画像に複数リンクを設置するようにしましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
HTML
HikoPro Blog

コメント

タイトルとURLをコピーしました