htmlのmapタグ。クリッカブルマップで画像の好きな座標にリンクをつける

2019年6月24日2023年9月5日

R.U.I

ふた昔前くらいに流行ったであろうhtmlのmapタグことクリッカブルマップ。

画像の好きなところにリンクをつけられる便利なやつ。

PCもスマホも同じデザイン・ファイル（ページ）で見せるレスポンシブデザイン時代の今も、jQueryを利用することでレスポンシブデザインサイトでクリッカブルマップが実装できるようになっています。

ECサイト運営をしているとたまにLPで求められたりもするので、ここでひとつ覚えておきましょう。

私も備忘録的に記録へ残したいと思います、

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。プロフィール詳細やレビューガイドライン

mapタグをレスポンシブ対応「jQuery RWD Image Maps」

jQueryを利用すると冒頭で書きましたが、そのjQueryがこの「jQuery RWD Image Maps」。

このjQueryを利用することで、超簡単にレスポンシブ対応にできます。超オススメ。

jQuery RWD Image Mapsの使い方

使い方もいたって簡単。

「stowball/jQuery-rwdImageMaps」からjsファイルをDLしサーバーへ適宜アップロードします。

私は「jquery.rwdImageMaps.js」というファイルだけDLさせていただき、サーバーへアップロードしました。（ソースをコピーして新規ファイル作成でも利用できます）

そして、jQuery本体とアップロードしたjquery.rwdImageMaps.jsを読み込んでスクリプトを走らせます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>/*jQuery本体読み込み。他で読み込んでたら不要*/
<script type="text/javascript" src="js/jquery.rwdImageMaps.js"></script>/*今回アップしたもの。ファイルまでのアドレスは適宜変更*/
<script>/*スクリプトを実行させる*/
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>

軽く補足も入れました。

これにて、クリッカブルマップをレスポンシブデザインに落とし込むことができます。

あとは通常通りmapタグを利用するダケ。