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

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

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

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

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

CSSでマスクする

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

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP