備忘録。そのときそのときに勉強しているもののメモ

immature

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>
0

-jQuery

Copyright© immature , 2021 All Rights Reserved Powered by STINGER.