How to include radio buttons over image?

Question

I want to place a radio button on every yellow mark. I can't figure out how to correcly place each radio button.

I found similar questions where there is no explication about how to put the radio button on the right place:

Place Radio Buttons over image

Make radio buttons over power background image

position radio buttons elements over background image

Is there a better way to accomplish this? Maybe using javascript.

If you know the exact image, you could figure out what percentage from the top/left of the document each little box is, then make a `position: relative` div that sits on top of your image (same width/height as the image) and absolutely position your radio buttons accordingly. But there's no magic solution to make this work with any random image. — cjl750, May 09 '19 at 03:25

score 2 · Accepted Answer · answered May 09 '19 at 03:22

Hope that I didn't misunderstand your question. Placing elements on image needs only css.

.container {
  position: relative;
}
.container input[type="radio"] {
  position: absolute;
}

<div class="container">
  <img src="https://i.stack.imgur.com/IlWS2.jpg">
  <input type="radio" name="option1" id="radio1" style="top:150px;left:278px;">
  <input type="radio" name="option1" id="radio2" style="top:150px;left:318px;">
  <input type="radio" name="option1" id="radio3" style="top:204px;left:402px;">
  <input type="radio" name="option1" id="radio4" style="top:260px;left:446px;">
  <input type="radio" name="option1" id="radio5" style="top:260px;left:474px;">
  <input type="radio" name="option1" id="radio6" style="top:260px;left:504px;">
  <input type="radio" name="option1" id="radio7" style="top:260px;left:534px;">
  <input type="radio" name="option1" id="radio8" style="top:260px;left:566px;">
  <input type="radio" name="option1" id="radio9" style="top:350px;left:358px;">
</div>

How to include radio buttons over image?

1 Answers1