プログラマーですが何か?まだプログラマーですが何か?プログラマーネタとアスリートネタ中心。dotnsfむかーしから存在している技術なのですが、イメージマップという便利な機能があります(最近あまり使われなくなったという印象もあります)。ページ内の画像内にクリッカブルな領域を複数定義し、いずれかの領域がクリックされたら何らかの処理を行う、というものです。関数を実行するとか、・・)を変えることができる、というものです。こんな感じで実現します。いらすとやさんの『ホワイト企業~ブラック企業のイラスト』を例に紹介します:このイラスト画像は横650ピクセル、縦137ピクセルです。その中にホワイト企業~ブラック企業が5段階のイラストで表示されています。いう矩形でできています。属性でイメージマップの名称を定義します。記述すればリンクを作成することもできます。いうメッセージが表示されるようになります。元は1枚の画像でしたが、クリッカブルな領域を5箇所定義することができ、それぞれのクリックハンドラを個別に設定することもできました:(左から2番めのビルをクリックした時の様子)ここまでが普通のイメージマップです。このイメージマップ、非常に便利な反面で「レスポンシブ対応が難しい」という難点がありました。要はクリッカブルな矩形領域をピクセル絶対値で指定しているため、画像がそのまま表示された場合はいいのですが、レスポンシブ対応などで画面サイズに合わせて拡大縮小されて画面いっぱいに表示された場合、縮尺が変更になってしまい、絶対値で指定していたイメージマップの定義がおかしくなってしまうのでした。クリッカブル矩形部分となっていて、本来の位置からズレていました。プラグインを使うことで解決できました:以下に具体的な対応手順を紹介します。内でレスポンシブのための宣言をしておきます。画像サイズの調整を行います。ブログ検索」ブログパーツは、サービスを終了しました。