interactive floor plans with photos website [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 9 years ago.

i am trying to create a page where an apartment's floor plan will be visible and while hovering over different areas.

my first approach was to create a div with the floorplan as background.
inside that div i added 100 smaller divs, all with dimensions 10%x10%. (10 accross, 10 down)

this actually displays the little rectangular divs on top of the floorplan and my idea was to have jquery display different pictures or options depending on what div the user will be hovering.

my problem with that approach was that i could not restrict the main div's dimensions to the aspect ratio of the floorplan image, which is not convinient as i want a solution that will work for multiple plans i might upload.

my other approach is to include the image inside the main div with an img tag and display the smaller divs on top of it, but i am not able to do that with css, anything i do would put the small divs after the img

any other ideas/ways i could achieve that? is there a way to restric the div to it's background picture's ratio? what is the appropriate css for the second approach? in order to display an img tag in the background and then 100divs on top of it?

thanx in advance, if i am not clear in my description please ask for clarifications

Answer 1

Sounds like something an image map is made for.