超簡単!jQueryを使ったレスポンシブ対応クリッカブルマップ『jQuery RWD Image Maps』

2016/02/03 サイト制作, 技術系 投稿者:竹内

img_imgmap

前回までにメディアクエリを使用して『既存のホームページをレスポンシブスマホ対応する方法』レスポンシブ対応に最適な『jQueryを使った折りたたみ式のグローバルメニュー』をご紹介しました。

今回は、レスポンシブに対応した
jQueryを使ったクリッカブルマップ(イメージマッピング)『jQuery RWD Image Maps』についてご紹介いたします。

クリッカブルマップ(イメージマッピング)メリット、デメリット

クリッカブルマップのメリット

  • 複雑なデザイン(紙媒体用のチラシや、建設業の設計図や地図など)に対してリンクを貼る際に工数を短縮できる。
  • 元々のデザインを損なうことがない。

クリッカブルマップのデメリット

  • 画像が大きくなりがちでページが重くなる。
  • 画像内テキストがSEOとして働かない。
  • レスポンシブ対応を行うと画像サイズが可変となり、リンクエリアがずれる。

デメリットのうち、1つ目と2つ目の部分は承知のうえで利用していると思いますので、3つ目のレスポンシブ対応の部分を解決するために『jQuery RWD Image Maps』を使います。
条件として、工数短縮がクリッカブルマップを使う理由の1つでもあるので、そういった意味でも『jQuery RWD Image Maps』は工数短縮のメリットを損なわず実装することが可能です。

早速実装してみましょう

今回は「既存のクリッカブルマップありのページをレスポンシブ化したところ、クリッカブルマップがずれて使えなくなってしまった。」というところからレスポンシブ対応のクリッカブルマップを実装する過程をご説明いたします。

まずはこちらからファイルをダウンロードします。

HTML内にScriptファイルを設定する

htmlファイルに記述

HTMLにjQueryのファイルとjquery.rwdImageMaps.jsのファイルを読み込む記述、スクリプトに命令を出す記述を追加します。

 

jquery.rwdImageMaps.jsの中身を編集する必要はありません。これで終了です。

DEMOページをご確認ください。ブラウザ幅を狭めて画像サイズが変わってもクリッカブルマップがずれていないことが確認できると思います。

まとめ

クリッカブルマップは複雑なレイアウトのチラシやバナー、地図に使って工数の短縮とデザインの維持が可能になりますので、とても便利な反面、今回のようにレスポンシブ対応した際に正常に動かなくなってしまいます。
せっかくクリッカブルマップを使って工数短縮してもレスポンシブ対応に工数をかけてしまったら元も子もないので、今回のようにレスポンシブ対応させても工数が少ないことは非常にありがたいですね。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)