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
以上で解説を終わります。

目次

関連記事

HTMLCSS

CSSだけで自動横スクロールするアニメーションを実装する方法

2022.07.15
594
jQuery

タブ切り替えでタブを上下に二つ設置し、連動させる方法

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

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
288
HTMLCSS

【簡単】CSSで背景画像だけ回転させる方法

2022.12.02
59