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
Sounds like something an image map is made for.