How to access different resources of floorplan and save position of each resource in database

Question

I am having an image of a floorplan like this

There are two things which I am looking

1. I am having the record in my database which tells the occupancy of each cabin or seat, whether it's occupied or not. So, I just want to reflect the occupancy of each seat/cabin in this picture.

2. When a user clicks on any seat/cabin I should be able to get the respective seat or cabin id.

Two achieve this, There are two approaches:

1. Either place a small colour full overlay on the seat which will show whether it's occupied or not.

2. Create a dynamic DOM version of this floorplan on the web and then access each resource.

Please help me with this, It's been weeks since I am struggling with this.

Thanks.