BLOG

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

| JavaScript

クリッカブルマップってのはあんまりつかわなくなったんですが、たまに使いたいって言われることがあるので調べてみたのでメモ
クリッカブルマップでレスポンシブの対応の定番は 「jQuery RWD Image Maps」 だそうですね。
まぁ、脱jQueryって状態のいまでいまさら使いたくないですよね。
それにiPhoneとかでバグがあるらしいので、それでは使えないわけであります。
そんなこんなで調べてみた

  • jQuery非依存
  • 軽量

こういう触れ込みの 「image-map-resizer」 をみつけたんで試してみるよね。
とりあえずはクリッカブルマップをつくってね。

HTML Imagemap Generator

まずは作るの面倒なのでジェネレーター使って簡単につくってください。
Dreamweaver使ってた時代はそれでつくってましたけどね。
それは置いといてジェネレーターの流れは

  1. 画像をドラッグ・アンド・ドロップする
  2. シェイプツールでクリック範囲を指定
  3. HTMLをコピーしてくる

これでクリッカブルマップの部分は完了ですね。

あとは 「image-map-resizer」 を設置します。
どりゃ!

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
  imageMapResize();
</script>

これだけ!
特に難しいこともないので、試してみてください。
jQueryにも対応してるみたいですが、使わないのでスルーですw
今回はほんまに簡単でしたね。
ってことで、廃れていくであろうけどもクリッカブルマップを使いたいって言われたときにでも使ってみてください。

RECENT POSTS

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP