I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections.
I'm struggling to figure out how to achieve this. I initially thought z-index would work, but it's not giving me the desired result.
In the second picture (expected outcome), you can see that the car is divided into 6 sections. These should be represented by 6 selectable div elements positioned above the image. How can I implement this?
Current representation: https://i.sstatic.net/2NHKR.png
<fieldset class="form-group col-lg-12">
<label class="font-medium-2 text-bold-600" for="car">Auto</label>
<ng-select formControlName="car" [searchable]="false" [clearable]="false" [items]="allCars"
bindLabel="name" bindValue="val">
</ng-select>
<img class="col-lg-12" [src]="this.GutachtenForm.value.car" />
</fieldset>
Desired setup: https://i.sstatic.net/2NHKR.png
The goal is to allow users to select specific positions on the image and have those areas marked accordingly.