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 限定

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

期間工最新情報、激アツ
トヨタ期間工 入社
 祝い金が 
          UP 

 

入社祝い金 40
※ メーカーより特別手当 20  + 初回更新手当 20

 

経験者手当:最高10

 

年収例445以上可能 ※1年目

 

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

 

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

 

期間工、募集企業名 特典
トヨタ自動車 入社祝い金 40 【特別手当 20 + 20 初回更新

  • ◇満了慰労金+報奨金
    • 3ヶ月満了 122,000円(満了慰労金30,500円+満了報奨金91,500円)
    • 6ヶ月満了 390,400円(満了慰労金207,400円+満了報奨金183,000円)
    • 12ヶ月満了 488,000円(満了慰労金305,000円+満了報奨金183,000円)
    • 18ヶ月満了 512,400円(満了慰労金329,400円+満了報奨金183,000円)
    • 24ヶ月満了 536,800円(満了慰労金353,800円+満了報奨金183,000円)
    • 30ヶ月満了 561,200円(満了慰労金378,200円+満了報奨金183,000円)
    • 35ヶ月満了 576,000円(満了慰労金396,000円+満了報奨金180,000円)
豊田自動織機 ★★メーカーより入社特典総額55万円支給★★
【内訳】
■入社祝い金50万円
■赴任手当3万円
■食事手当2万円
※支給規定あり
トヨタ自動車九州 メーカーより入社祝い金 総額 40万円 ※規定あり
スバル、群馬製作所 入社特典最大55 メーカーからの支給
※入社祝い金や特典には規定があります。
応募や面接時に確認しましょう。
スポンサーリンク
おすすめの記事