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

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

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

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

CATEGORY

POPULAR POSTS

PAGE TOP