質問: ### 前提・実現したいこと ある施設のフロアマップと、各フロアの写真表示を連動する仕組みを実現したいと思っています。 ポイント ・画面左に大きな写真(幅500px程度)、画面左にフロアマップ画像(幅500px程度)を配置 ・フロアマップ上のあるポイントにマウスカーソルを合わせる(もしくはクリックする)と、左の写真が、その場所を表す写真に切り替わる ・表示されている写真の場所は、フロアマップ上でハイライトさせる こういった仕組みを実現する方法はないでしょうか? 参考になるサイト、こういった仕組みを採用しているサイトなどがあれば教えてください。 よろしくお願いいたします。
回答: 私が以前作ったサンプルですが、一覧のリストと、地図上のポイントがソース上は一つのliになっていて連動するように見えるものです。 サンプル これは地図側に吹き出しが表示されますが、同じ親要素の中にいるので左のリストのほうに写真を出すこともできます。ほぼCSSで実現していて、チェックのイベントの発火タイミングだけJSで少しいじっています。 ほかの方法であれば、canvasを利用して動的に作るとか、マップをSVGにしておいてクリックイベントを仕込むっていうことができます。 その際にクリックした要素を判定して左に出す写真のパスを変更するとかですかね。