div image background clickable position

Issue

l have this image above

l am trying to find a solution to make this image clickable for reservation position seat.

simple array :

seats: any=[
    
    {
      id:1,
      selected:false,
      price:50,
    },
    {
      id:2,
      selected:false,
      price:35,
    },
    {
      id:3,
      selected:false,
      price:35,
    },
    {
      id:4,
      selected:false,
      price:35,
    },
    {
      id:5,
      selected:false,
      price:35,
    },
    {
      id:6,
      selected:false,
      price:35,
    },
    {
      id:7,
      selected:false,
      price:35,
    },
  ]

html code :

<div class="main_back">
   
</div>

css :

.main_back{
   background-image: url('../../../assets/seat.jpg');
    background-color: #ffffff;
    height: 50%;
    width: 250px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    margin: auto;
}

If i use CSS and ngfor i will not get the current position layer for each seat, if the seat is booked or not when hovering on seats like red or green color . using position absolute or relative .

any solution?

Solution

I suggested you the "seats" was .svg (and remove the seats from the image), so we can to have an array of object with almost this properties: x,y,selected and ocupped

  seats=[{x:10,y:10,selected:true,ocupped:true},
         {x:130,y:10,selected:true,ocupped:false},
          ....
        ]

A simple .html like

<div class="car">
  <svg
    class="seat"
    (click)="!seat.ocupped && seat.selected = !seat.selected"
    [class.ocupped]="seat.ocupped"
    [class.selected]="seat.selected"
    *ngFor="let seat of seats"
    [style.top.px]="seat.y"
    [style.left.px]="seat.x"
  >
    <!--replace with a beauty seat-->
    <rect width="50" height="50" rx="5" ry="5" />
  </svg>
</div>

See the property "ocupped" makes "not selectable" the seat

And a .css like

.car{
  position:relative;
  width:200px;
  height:300px;
  ....
}
.seat{
  position:absolute;
  fill:silver;
}
.seat:hover:not(.ocupped) {
  opacity:.5;
  cursor:pointer
}
.seat.selected{
  fill: lightsteelblue;

}
.seat.ocupped{
  fill: #DA4567;
}

make the trick. See an ugly stackblitz

NOTE:I don't like the path you use in the background. I'm pretty sure that the background should be

background-image: url('assets/seat.jpg');

think that in production (and in develop) the .index.html and the .css is in the folder "dist" and the assets are in the folder "dist/assets"

Answered By - Eliseo