Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

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.

Answer №1

Ensure to retrieve your outcome in the specified format provided in the URL link above.

http://jsfiddle.net/eg5o1w6L/1/

After obtaining an individual div, proceed with implementing hover functionality for that specific div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are your divs getting truncated?

Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added. Despite changing page sizes and thoroughly debugging by o ...

Vue 2 does not properly transition the initial element when using the `mode=out-in` attribute

In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappear ...

What is causing the issue of the div not being removed from the label renderer in three.js

Hello, I've been trying to solve this issue for the third time now without much success. The problem I'm facing is related to creating a div at runtime and then attempting to remove it after clicking on it. Although I've tried removing the d ...

Setting up conditional select options in Angular

I need to create a select list with specific options based on the data in an object. For instance, if the data property is 0, I want to display an option as 0 with the ability to switch to 1, and vice versa. However, when rendered in HTML, no option value ...

Validating Emoji Inputs in Angular

Is there a way to validate input for Emoji and display an error message if invalid? The form field in question is: 'name': new FormControl('', [Validators.required]), ...

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent. HTML .container { height: 340px; /* background-i ...

using javascript to change a link's state with a click action

I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...

Is there a significant time-saving benefit to utilizing nested rules in CSS, particularly when using HAML or LESS?

Here is how I am currently coding my CSS: Regular CSS: #content { color: white; background: black; } #content a { color: yellow; } #content p { margin: 0; } #content (etc...) #contnet (etc...) #content (etc...) (I always include the parent eve ...

Exploring Angular unit testing for immutable variables

Currently, I am working on writing unit tests for a specific class that contains readonly class variables. I am trying to ensure complete test coverage and understand how to cover the logic inside these variables. import { Injectable } from '@angu ...

Failure to respond to dual part form by RemoveClass

Currently, I am utilizing jQuery to visually control a form. The issue arises when trying to remove classes from the first part of the form using removeClass. While this works initially, upon clicking the button to advance to the second part of the form, t ...

When the pathway is void, it becomes impossible to redirect to the designated component

I recently developed a code that is supposed to redirect to a specific component when the application starts. const routes: Routes = [ {path: 'home', component: HomeComponent}, {path: 'content', loadChildren: 'app/componen ...

Overflowing Collection of Hidden CSS Assets

Here is a unique question. I'm currently implementing some CSS lasers for a futuristic website design: https://codepen.io/jefferymills/pen/xpmDK The code below showcases how to incorporate the lasers using HTML: <div class="laser-beam"></di ...

How to add a checkbox to an HTML form with QT

I am looking to add a checkbox in an HTML code using QT. I have successfully created an HTML using QTextEdit and QTextCursor, but I am unsure of how to insert a checkbox. If anyone has experience with solving this issue, please provide me with some guidan ...

Ways to create a responsive design for this specific part of the

https://i.sstatic.net/2JyyN.jpg Hello everyone, I'm looking to make this section responsive at 768px .AppleContent { background-color: #9ACD32; text-align: center; padding: 50px 200px; color: white; } <section class="section-1"& ...

Creating Table Rows on-the-fly

Seeking assistance and guidance from the community, I have modified code from an online tutorial to allow users to dynamically add rows to a table when data is entered in the row above. However, I am facing an issue where I can only insert one additional ...

The argument list must contain at least one type

Currently, I am executing my code snippet private convertToItemsValidationTo(selectedRows: DetailsTo[]) { if (!selectedRows || selectedRows.length === 0) { return; } (...) itemsValidationTo.convertedVlues = new Map<>(); selectedRows.forEach(row = ...

Having trouble with utilizing pako.js in your JavaScript code? The error "Pako is not defined

I'm relatively new to the world of JavaScript. Currently, I'm tackling an algorithm that involves deflating in Java and inflating in JavaScript. While researching solutions, I came across pako.js as a recommended tool for decompression. However, ...

Tips for running a dry default with Angular CLI

Query: Can dry-run be set as the default in a configuration? Purpose: Enabling dry-run by default simplifies the learning process by minimizing clean-up tasks if the command is not correct. This can encourage users to always perform a test run before exec ...

What is the best way to delete the text following the last "/" in location.href with the help of

I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...

"In the realm of RxJS, there are two potent events that hold the power to

In my current situation, I encountered the following scenario: I have a service that makes Http calls to an API and requires access to user data to set the authentication header. Below is the function that returns the observable used in the template: get ...