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を使ってdivタグ、pタグ等のテキスト値を取得する方法

更新日:2022.09.09
1082
jQuery

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

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

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

2022.03.15
2004
HTMLCSS

CSSでテキスト選択を不可・禁止にする方法

2023.01.26
181