bb_line_koushiki
bb_line_koushiki

bb_info_line
bb_info_line

QRコード恐竜が可愛い

カメラで読み込んで見てね!

恐竜QRを表示させる方法

動画の中に新しい機能が!

2021年東京オリンピック開会式予定まであと何日?

New video marketing

 

クリッカブルマップで【スマホ対応】日本地図、画像にリンク設定方法
スポンサーリンク

クリッカブルマップ画像をクリックすると指定した場所やページに移動させたい時、画像にリンク設定します。

指定したリンクを応用して日本地図作成後、地域別、都道府県別に行くようにしていきましょう

 Google図形描画を使って、画像作成はこちらの記事で紹介しています。

手順

手順

  1. 1枚画像を用意する
  2. HTML Imagemap Generator
  3. 座標を作成
  4. クリッカブルマップ画像にリンク設定
  5. スマホ対応・レスポンシブにする

画像にリンク、HTML Imagemap Generator

 

画像にリンク設定するには座標を調べないといけません、illustratorなどソフトを使ったことがある方は分かりますが、初心者でも簡単に画像座標を計算してくれる、サイトがあります、HTML Imagemap Generator

簡単に作れますので作成していきましょう。

日本地図html参考

HTML Imagemap Generatorで作成後

<img src="画像挿入" usemap="#ImageMap" alt="" />

<map name="ImageMap">
<area shape="rect" coords="352,3,439,69" href="https://www.google.com/search?q=%E5%8C%97%E6%B5%B7%E9%81%93&amp;oq=%E5%8C%97%E6%B5%B7%E9%81%93&amp;aqs=chrome..69i57j0l5.8267j0j7&amp;sourceid=chrome&amp;ie=UTF-8" alt="" />

<area shape="rect" coords="353,78,438,152" href="https://www.google.com/search?safe=active&amp;ei=q8e9XNKeBeaumAXQj5W4Dg&amp;q=%E6%9D%B1%E5%8C%97&amp;oq=%E6%9D%B1%E5%8C%97&amp;gs_l=psy-ab.3...0.0..150...0.0..0.0.0.......0......gws-wiz.VICO1V4wBN4" alt="" />

<area shape="rect" coords="353,152,438,227" href="https://www.google.com/search?safe=active&amp;ei=mMe9XLXyHITMmAWX2LRw&amp;q=%E9%96%A2%E6%9D%B1&amp;oq=%E9%96%A2%E6%9D%B1&amp;gs_l=psy-ab.3...0.0..140...0.0..0.0.0.......0......gws-wiz.iysH_zqJzh4" alt="" />

<area shape="rect" coords="15,277,61,300" href="https://www.google.com/search?safe=active&amp;ei=tce9XJGMKPHUmAW5krDgBA&amp;q=%E6%B2%96%E7%B8%84&amp;oq=%E6%B2%96%E7%B8%84&amp;gs_l=psy-ab.3...0.0..156...0.0..0.0.0.......0......gws-wiz.yerzRgEujag" alt="" />
</map>

リンク先は短縮していません。

日本地図で説明すると記述が多くなるのでマウス画像で説明して行きます。

 

 

サイトを開く前に何でもいいので、今回使う画像を1枚用意しておきましょう。

HTML Imagemap Generator使い方

用意した画像をドラッグします。

 

A、短形を描くを選択して

B、左クリックしながら、図形を囲って(Bの赤枠線)

C, PC画面右にhtmlコードが表示されます。

D、htmlコードをコピー【 Ctrl + C 】

ここから、図C解説

<img src="Image.png" usemap="#ImageMap" alt="" />

<map name="ImageMap">

   <area shape="rect" coords="7,3,38,46" href="#" alt="" />

</map>

  1. coords="7,3,38,46"図形の座標
  2. href="#"、指定するリンク
  3. alt=""""の中記述なしでOK
  4. alt="マウス"、編集中は分かりやすく名前を付けてもOK

画像にリンク挿入

 

編集前

<img src="Image.png" usemap="#ImageMap" alt="" />

<map name="ImageMap">

   <area shape="rect" coords="7,3,38,46" href="#" alt="" />

</map>

"Image.png"の所に画像urjを入れる

編集後

<img src="マウス左.png" usemap="#ImageMap" alt="" />

<map name="ImageMap">

   <area shape="rect" coords="7,3,38,46" href="#" alt="" />

</map>

 

クリッカブルマップサンプル

今回は、topページに行きます、

画像の上に、

ポインターを合わるとクリッカブルマップが作成できたか確認できます。

になっていれば座標はOKです。

次にリンク先ですが、あなたが好きな所に指定してください

<area shape="rect" coords="7,3,38,46" href="#" alt="" />

href="#"

#の所にリンク

 

スマホ対応・レスポンシブ

画面を拡大縮小、PCで見てもスマホでも同じ動作するようにします。

jsダウンロード

 jQuery-rwdImageMaps

ダウンロードしたら、jQuery-rwdImageMaps-masterフォルダー (.zip)解凍して、

新規にjsフォルダーを作成します、

ファイルが4つありますが、jquery.rwdImageMaps.min.jsをjsフォルダーに移動、

jQuery本体はGoogleから読み込みします。

サーバーにjs設置すればOK

 

jQuery-rwdImageMaps というライブラリを使えば解決できます。

使い方としては、

$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
のような感じで、 簡単に画像要素を指定するだけです。

これで、 画面の大きさを変えても このライブラリが座標を良い感じに変更してくれます。

参考にさせて頂きました、ありがとうございます。

 

まとめ

使う頻度が少ないかもしれませんが、覚えておくと便利です、是非とも使って見て下さい。

ポイントは、HTML Imagemap GeneratorとjQuery-rwdImageMapsの使い方です。

 

スポンサーリンク
おすすめの記事