I’m currently working to develop a real estate website for a client. The client is stuck with the idea to create something like this :
http://woodfield-sillery.com/plans/
Basically, I’m looking to find a way to recreate the same thing, technically it would require :
- Managing image map behaviour (to be able to react to mouseover)
- Managing the onclick to open a view of the selected floor
- Once selected, a second map would show of the floor, with available condos
- Then onclick again, it would show pricing, availability, etc.
I’m having trouble managing the rollover image map through CSS.
Besides that, of course, the client would want to manage all by himself (so he can update the condo statuses), and I was planning to host the website through WordPress
Questions :
- Has anyone worked on a solution like this and would be willing to share experience?
- Has anyone come across a WordPress solution that works this?
- Has anyone have a technical solution for this (Javascript, HTML5, CSS combined?)
I’m the author of MapSVG WordPress / jQuery plugin which is able to do what you need: http://mapsvg.com
To get started you would need to create a blank image in any vector editor (InkScape, Adobe Illustator, etc.). Then embed building image (png/jpeg) to the background. Then add shapes on top of the image and give them a transparent color fill (=rgba(0,0,0,0)). Save image as SVG, upload it to MapSVG map builder.
Everything else will be done in MapSVG Builder – colors, tooltips, popovers, links, event handlers, etc. See the demo.
you can use maphilight plugin
or you can use jvector
tutorial use link