wordpress - レスポンシブ デザインのトラブルにおける絶対配置要素

Question

これは私が取り組んでいるワードプレスのサイトです。

http://northbroad.2one5dev.com/

基本的に、1 ～ 6 の 6 つのラベルは、それらの上にマウスを置くと、新しい div の表示をトリガーします。

問題は、マップ イメージがレスポンシブ デザイン用に設定されており、その幅がパーセントで定義されているため、ブラウザーのサイズに基づいてスケーリングされることです。しかし、私が持っているホットスポットは、「上」と「左」に基づいて絶対的に配置されています。つまり、鉱山とは異なるブラウザーのサイズに基づいて正しい場所を失うことを意味します。

画面の幅に関係なく、ホットスポットが拡大縮小して背景画像に追従するように、これを機能させる方法はありますか?

Answer 1

流動的なデザインのホットスポットのもう 1 つの回避策は、Edge Animate でリンクを使用してレスポンシブな静的イメージを作成することです。ホットスポット (またはホットスポットとして機能するレイヤー) は完全に応答します。欠点は、50kb のイメージが Edge から出力されると約 120kb になることです。とは言っても、かなり迅速な回避策です。