-3

I am working on a project to create an interactive floorplan for an office. I have a jpg graphic of the floorplan to the building. The idea is to create a search bar where you can search for an employee and their office will be highlighted on this graphic.

My original plan was to use the map tag and plot in the coordinates for each office. I would use jQuery to resolve the search value and link it to each office coordinate. However, I learned that you cannot add styles to the map tag which made this unworkable. I have a tried a few other solutions such as converting the image to a .svg and using the svg tag. This does not seem to work either since svg tag seems to be meant for creating your graphics on the fly in the document.

Can anyone point me in the right direction for this project? I keep going back to square one and not sure where to go from here.

user2253709
  • 15
  • 4
  • The `svg` tag is meant for displaying scalable vector graphics. You can use it to create your own, or display existing ones. There are actually [several](http://stackoverflow.com/q/11236085/215552) [examples](http://stackoverflow.com/q/2717008/215552) [on this site](http://stackoverflow.com/q/39916366/215552) for what you want. – Heretic Monkey Jan 18 '17 at 23:49

1 Answers1

0

You could specify a absolute position on a div (to indicate a persons location on the floor plan), when in a relatively positioned container.

You could then place data attributes of the inner div to do the calculation of the position.

<div style="position:relative;background:url(floorplan.jpg)">
   <div style="position:absolute;top:50%;left:25%" data-person="Liam"></div>
</div>

This does involve separating out the sections into their own html tags, rather than being "embedded" in the image.

Also SVG aren't supported in older browsers

You should then access the div based on the data- attribute an modify it in the DOM.

You can then also use onmouseover (this won't work on touch devices), to activate styling changes.

Liam
  • 114
  • 5
  • [SVG is supported in all browsers, including IE9 and up.](http://caniuse.com/#search=svg) – Heretic Monkey Jan 18 '17 at 23:51
  • IE7 and IE8, unfortunately aren't totally dead just yet, so it's worth considering, svgs don't work on these browser. A lot of corporate networks are stuck on old crappy browsers such as this. – Liam Jan 18 '17 at 23:55
  • microsoft doesn't even support IE8 any more – charlietfl Jan 19 '17 at 00:00
  • That is true, but I still see support requests to make things compatible for a fairly sizeable portion that are using it :( – Liam Jan 19 '17 at 00:11