アパートの間取り図が表示され、さまざまな領域にカーソルを合わせているページを作成しようとしています。
私の最初のアプローチは、フロアプランを背景としてdivを作成することでした。
そのdiv内に、すべて10%x10%の寸法の100個の小さなdivを追加しました。(横に10、下に10)
これは実際にはフロアプランの上に小さな長方形のdivを表示します。私のアイデアは、ユーザーがホバーするdivに応じて、jqueryにさまざまな画像やオプションを表示させることでした。
そのアプローチでの私の問題は、メインdivの寸法をフロアプラン画像のアスペクト比に制限できないことでした。これは、アップロードする可能性のある複数のプランで機能するソリューションが必要なため、便利ではありません。
私の他のアプローチは、画像をimgタグでメインdiv内に含め、その上に小さいdivを表示することですが、cssではそれを行うことができません。私が行うことは、imgの後に小さいdivを配置します。
私がそれを達成できる他のアイデア/方法はありますか?divを背景画像の比率に制限する方法はありますか?2番目のアプローチに適したCSSは何ですか?バックグラウンドでimgタグを表示し、その上に100divを表示するには?
事前に感謝します。説明が明確でない場合は、説明を求めてください