title: Positioning wheel images on top of different car models images using JavaScript
body: <p>I'm working on a web app which is a basic car visualizer using vanilla JavaScript. It shows the users a car model and a list of wheels. Users can select a wheel which will be then displayed on top of the car model.</p>
  <p>For the very first car model, I used CSS styling to position the new wheel images on car model. And when the user changes the wheels, all the wheels perfectly fit over the car model.</p>
  <p>Here's the HTML and CSS code for the positioning:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.v-vehicle-vis-container {
    position: relative;
    transform-origin: center;
  }
  .v-vehicle-image {
    width: 700px;
    pointer-events: none;
  }
  .v-wheels {
    position: absolute;
    background-color: #222;
    border-radius: 50%;
    pointer-events: none;
  }
  .v-wheels.front-wheel {
    top: 147px;
    left: 469px;
    width: 48px;
  }
  .v-wheels.rare-wheel {
    top: 146px;
    left: 181px;
    width: 48px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="v-block v-card v-vehicle-vis" id=""&gt;
      &lt;div class="v-vehicle-vis-container"&gt;
          &lt;img src="./images/Car Models/2000 Integra R/1280veh.0integra.15.Black.png" alt=""
              class="v-vehicle-image"&gt;
          &lt;img src="./images/wheel-1-s.png" class="v-wheels front-wheel" alt="" srcset=""&gt;
          &lt;img src="./images/wheel-1-s.png" class="v-wheels rare-wheel" alt="" srcset=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It gives this output:
  <a href="https://i.stack.imgur.com/Eddyw.png" rel="nofollow noreferrer">Output of very first car model</a></p>
  <p>When I change the car model, since the wheels have absolute positioning, they will be exactly there but the new car model obviously has different dimensions so the wheels will not be placed properly:
  <a href="https://i.stack.imgur.com/rvbnn.png" rel="nofollow noreferrer">Output of new car model</a></p>
  <p>The solution I have in my mind is to check wheels absolute 'top' and 'left' positions for every car model and placed all the values in a JS object, so that every car model will have a reference of wheels positions and will implement it accordingly.</p>
  <p>This solution seems to work if there are a few other car models. But if there are hundreds or thousands of car models, this will take forever to check position of wheels for every car model.</p>
  <p>Wondering if there's any solution like automating the process of detecting car wheels position and placing new wheels exactly there for every car model.</p>
  <p>Thank you.</p>