プログラマーですが何か?まだプログラマーですが何か?プログラマーネタとアスリートネタ中心。dotnsfむかーしから存在している技術なのですが、イメージマップという便利な機能があります(最近あまり使われなくなったという印象もあります)。ページ内の画像内にクリッカブルな領域を複数定義し、いずれかの領域がクリックされたら何らかの処理を行う、というものです。関数を実行するとか、・・)を変えることができる、というものです。こんな感じで実現します。いらすとやさんの『ホワイト企業~ブラック企業のイラスト』を例に紹介します:このイラスト画像は横650ピクセル、縦137ピクセルです。その中にホワイト企業~ブラック企業が5段階のイラストで表示されています。いう矩形でできています。属性でイメージマップの名称を定義します。記述すればリンクを作成することもできます。いうメッセージが表示されるようになります。元は1枚の画像でしたが、クリッカブルな領域を5箇所定義することができ、それぞれのクリックハンドラを個別に設定することもできました:(左から2番めのビルをクリックした時の様子)ここまでが普通のイメージマップです。このイメージマップ、非常に便利な反面で「レスポンシブ対応が難しい」という難点がありました。要はクリッカブルな矩形領域をピクセル絶対値で指定しているため、画像がそのまま表示された場合はいいのですが、レスポンシブ対応などで画面サイズに合わせて拡大縮小されて画面いっぱいに表示された場合、縮尺が変更になってしまい、絶対値で指定していたイメージマップの定義がおかしくなってしまうのでした。クリッカブル矩形部分となっていて、本来の位置からズレていました。プラグインを使うことで解決できました:以下に具体的な対応手順を紹介します。内でレスポンシブのための宣言をしておきます。画像サイズの調整を行います。使う機会が少なからずあります。対応したモーダルダイアログの軽量プラグインで、メイン画面にオーバーラップするダイアログ画面を呼び出し、ダイアログを閉じるまではメイン画面が使えなくなります。的な言い方をすると、ボックス領域の表示/非表示を切り替えつつ、ここが表示されている間は他の要素にアクセスできなくさせたい場合などに便利です。使った地図アプリを作っています。地図を表示する方法です。地図領域を定義しておくだけで)使えそうな気がしていたのですが、どうもこれらの初期化処理時における相性があまりよくないようで、ちょっとしたコツが必要だということがわかりました。初期化してダイアログ内に表示するという順序で実現する必要がありそうでした。組み合わせて使う場合は、その初期化タイミングをダイアログの表示後に(ダイアログの表示が完了したことを検知した上で動的に)行う必要がありそうでした。以下は具体的な実現方法です。表示するモーダルダイアログ部分(id="mapModal")を定義します。スタイル指定をしておきます。アクションを作成します。インライン表示するようにしています。指定するのが肝のようです。dotnsfグーグルマップは今やナビ代わりにも使えて非常に便利です。機能が有効になったスマホのブラウザで起動し、現在地から目的地までのナビゲーションを行う画面にジャンプさせたいものとします。結論としては意外と簡単でした。リンクを作成したので、このページを実際にスマホのブラウザで参照した後にリンクをクリックすると実際にナビゲーションを開始することができるので試してみてください。ブログ検索」ブログパーツは、サービスを終了しました。