１つの画像に複数のリンクを貼る方法

Question

１つの画像でクリックする場所により飛ぶリンク先を複数設定したいです。
例えば添付のような画像が１枚あった場合、りんごの場所をクリックするとリンゴの販売ページに飛んで
ミカンをクリックするとミカンの販売ページに飛んで、ブドウをクリックするとぶどうの販売ページに飛んで。。。といった画像を作りたいです。
出来ますか？
以前はスケッチページで作った記憶がぼんやりとあるのですが、スケッチページが終わってしまったので作る方法がありましたら教えてください。
宜しくおねがいします。###HR######IMG02c3ddc0663be5a2162ac332d14dffbcb.jpegIMG0###

Answer

ECマスターズの三輪です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

こんにちは、shinoshinoです。

この機能はいわゆるイメージマップと呼ばれるものです。

オンラインで無料生成できるサービスもありますので、以下のページをご覧ください。

■HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法
https://mio-code.com/2020/01/25/imagemap/

Answer

shinoshino様
情報提供ありがとうございます。

ECマスターズの三輪です。

> １つの画像でクリックする場所により飛ぶリンク先を複数設定したいです。

shinoshino様がご紹介頂いているとおり、
以下のツールをご利用されますと１つの画像に複数リンクを設定できます。
PC用商品説明文には、設置できますが
スマートフォン用商品説明文には設置できません。

【HTML Imagemap Generator】
https://labs.d-s-b.jp/ImagemapGenerator/

操作方法は、以下をご参照下さい。

①使用する画像をサイト内にドラッグ
②「矩形、円、多角形の描く」いずれかを選択
③リンクさせたい箇所を囲む
④全てのリンク箇所の指定後、ソースコードをコピー
⑤RMSに貼り付け後、href="#"の箇所をリンク先に変更

https://ec-masters.gyazo.com/0c2b66d48b924e9f76de18adac2b60f6

Answer

さすが事務局、説明が丁寧♪

Answer

shinoshino様ありがとうございます。
参考になりました。
ECマスターズの三輪様、丁寧なご教示ありがとうございます。
大変参考になりました。
でも、スマホには出せないのですね。。。
それは困りますね。。。
そうなると商品画像の所に１つずつ画像を貼ってリンクをはるしかないかな。。。。
再度、考えてみます。