Written by Kasumi

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

テキストコーディングが難しく、画像で埋め込むことにしたけど、画像内に複数のリンクを、設置する箇所がある。。
一枚画像に複数のリンクを設置することは出来ないの??

このような疑問に答えます!

HTMLのイメージマップ(クリッカブルマップ)という仕組みを利用することによって上記を解決できます!本記事ではイメージマップ(クリッカブルマップ)のやり方について解説します。

下記サイトでイメージ画像をアップロードしよう

下記サイトでイメージマップをアップロードしよう

まずは下記サイト様へ行き、リンクを貼りたい画像をアップしよう!
https://www.image-map.net/
Select Image from My PCボタンを押すと画像をセレクトする画面に変わります。

リンクを設置する箇所をドラックしよう

リンクを設置する箇所をドラックしよう

リンクを設置する箇所をマウスでドラックして決めよう。
一か所決めたら、下部に Add New Areaボタンがあるのでそこを押して、新たにリンクを設置する箇所を選択しよう。

各オプションを設定しよう

各オプションを設定しよう

リンクを設置するのに様々なオプションを設定できます。下記がその内訳になります。
Active:どのリンク配置を修正、または新規追加するかを選択
Shape :選択範囲の形状を選ぶ
Link:リンク先を入れる
Target:別タブで開くか等々

ソースをコピペしよう

リンクを設置する箇所をドラックしよう

リンクを設置できたらShow Me The Code!ボタンを押して、ソースをコピぺしましょう。

最後にレスポンシブに対応させよう

このままだとイメージマップ以下のデバイスサイズになったら、リンクの位置がズレてしまいます。
jQueryjQuery RWD Image Mapsを読み込ませて、レスポンシブ対応させましょう。
上記コードを張り付ければOK!
jQuery RWD Image Mapsをダウンロードする場合は以下から!↓↓
https://github.com/stowball/jQuery-rwdImageMaps
以上で解説を終わります。

目次

関連記事

jQuery

jQueryを使って簡単にタブ切り替えを実装してみよう

更新日:2022.09.09
879
jQuery

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

更新日:2022.09.09
5064
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
5994
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
9807