jQuery

レスポンシブに対応したクリッカブルマップを作る

クリッカブルマップ（イメージマップ）を作ってほしいと相談を受けて、レスポンシブだからどうしようかなとググったら素敵なjQuery-rwdImageMapsにたどり着いたのでブックマーク

デモ

配布先デモ

配布

jQuery-rwdImageMaps　
使い方もgithubにのってます。

クリッカブルマップ生成サイト

上記のjQuery-rwdImageMapsにも使えます。
HTML Imagemap Generator

WordPressでもクリッカブルマップを使いたい

  1. HTML Imagemap Generatorでクリッカブルマップを作成する
  2. jQuery-rwdImageMapsでレスポンシブに対応させる（必要なjsファイルはテーマフォルダ内に入れて、クリッカブルマップが欲しいページにのみ条件分岐で必要なソースコードを出力させる）
  3. FancyBox for WordPressをインストール有効化する
  4. 作成したクリッカブルマップのソースコードはHTMLブロックに張り付ける
  5. areaタグ内に data-fancybox="gallery0" をつける（複数areaがある場合はgallery1,gallery2とdata-fancyboxの値を変える）

data-fancybox="gallery"のサンプル

<img src="クリッカブルマップのベースになる画像URL" usemap="#ImageMap" alt="画像の説明">
<map name="ImageMap">
  <area shape="rect" coords="23,65,236,88" href="クリックしたときの画像のURL" alt="画像の説明" data-fancybox="gallery0">
  <area shape="rect" coords="23,90,241,111" href="クリックしたときの画像のURL" alt="画像の説明" data-fancybox="gallery1">
  <area shape="rect" coords="22,113,267,136" href="クリックしたときの画像のURL" alt="画像の説明" data-fancybox="gallery2">
</map>
  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
giftee / ko-fi / mail

-jQuery