Hello! I need help getting started the code for an interactive floor plan for our apartment rental site. Basically we have a floor plan for each floor. We want the text to change on the individual unit to “Available” or Leased" depending on what it says in the database. I know I could just manually change it myself, but I am going to have a senior couple with little technological experience updating this site after I’m done with it and I want it to be as easiest for them as possible. I would like for them only to have to update the database.
I am familiar with Javascript, but haven’t used it in 10 years! Please help! Thanks in advance.
Note: When you hover over the Available boxes, it gives you more information about the rent/square footage and a View button. The View button is supposed to take you to the dynamic unit page…This is something else I will need help with.
You have two ways of doing this:
a) do all in the html-component, using (CSS) tables and message the availability and dynamic URL´s in an array to the component. This will be more or less outside the Wix-environment
b) put the floor plan on a Wix Page as an image and put a box with button and a separate text box over it (one over the other, for every apartment), on every location and use onMouseIn/Out to toggle text box (available/leased) and Box (with opacity set to something like 60% black). You would still have to provide the dynamic URL by code for the button-link property, but that shouldn´t be much of a problem. When the page is loaded and dataset is ready, you write a function to show the text box and fill it with either available or leased. On hoover, you hide the text box and show the box with button.
In Wix, images over images actually keep their position very well, so this might actually work.
In either case, this will not look good on mobile, since the floor plan prob. wont fit the screen.
Good luck.
HI there ,
i am also wanted to do that is there any update since 2018 on this interactive floor plan function?
