bb_line_koushiki

bb_line_koushiki

登録してくれたお友達に 特典 があるよ!

プレゼント1、完全無料でブログができる方法

プレゼント2,期間工情報や生活にかかせないお得が、、、
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の使い方です。

 

BB公式登録キャンペーン

3つのプレゼント

限定特典

お得がもらえる

だけもれなく全員

BB公式LINE 限定

期間工募集中!
激アツ 情報

期間工最新情報、激アツ
トヨタ期間工が募集再開を始めた!

 

入社祝い金10

 

初回更新手当10

 

経験者手当:最高10

 

年収例425以上可能

 

詳細は別記事で紹介している

 

募集、予約面接会場マップ、
他メーカー情報:
当サイトオリジナル

 

期間工、募集企業名 特典
トヨタ自動社 特別手当 20
豊田自動織機
トヨタ自動車九州 選考会交通費支給
スバル、群馬製作所 選考参加費 5
ホンダ、埼玉製作所 入社一時金最大 20
ホンダ、鈴鹿製作所
日産自動車 入社祝い金合計 :いわき工場 30

追浜工場:入社祝い金5

日産車体 入社祝い金総額 30
日産自動車九州 入社特典最大 50
日産車体九州 入社祝い金 50
ダイハツ九州 入社祝い金 25
いすゞ自動車 栃木
スズキ
入社祝い金 10
マツダ 広島
マツダ 防府
スポンサーリンク
おすすめの記事