define object within image html5 - css

Question

I have a bootstrap colum:
<div class="col-md-4 col-xs-12">
<img src="sample.jpg" style="height:100vh;width:100%;" />
</div>
and a sample picture:
My question is: Is there anyway I could define these two squares on a image as an objects? The problem I am facing is, I have a picture with some elements which would need to be defined as an objects... And I am trying to figure out what would be the best way to do it, if it is possible at all? Is there any software, which can help you with this? Some image to html generator or somethin? Eternal glory to the person who can present me solution! I would appreciate your reply.

Answer 1

Perhaps all you want to do is an image map?
Or, maybe, you want to position other elements over an image (see: example below)?
Or, you should use background image?
Perhaps your use–case could be not oversimplified and we'd be able to provide better solution for your exact need.
You need to be aware of different users and environments, especially if you plan to use this idea for navigation.
.rectangles {
border: solid red 1px;
position: relative;
}
.rectangles img {
outline: dashed blue 1px;
width: 100%;
}
.rectangle {
position: absolute;
outline: dashed red 1px;
color: #fff;
text-align: center;
}
.rectangle:hover {
background: red;
}
.rectangle.first {
left: 24.2%;
top: 14.4%;
width: 30.9%;
height: 20.2%;
}
.rectangle.second {
left: 24.9%;
top: 52.7%;
width: 29.9%;
height: 22.1%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-4 col-xs-12 rectangles">
<img src="https://i.stack.imgur.com/0ClBU.jpg" alt="Image with rectangles">
<a class="rectangle first" href="#">First rectangle</a>
<div class="rectangle second">Second rectangle</div>
</div>
</div>

Answer 2

Although I am not completely sure what you are asking, I think what you are asking for is if you can turn the image into a clickable object. The answer to that is yes. It is actually very simple because all you need is two different images (one for each square) surrounded by <a> tags. Here is the code:
function register1() {
document.getElementById('box').value = "Box 1 Clicked";
}
function register2() {
document.getElementById('box').value = "Box 2 Clicked";
}
div.2 {
position:absolute;
top:200px;
}
<div class="1">
<a onClick="register1()">
<img src="https://i.imgur.com/uomkVIL.png" width="200px" height="200px">
</a>
</div>
<div class="2">
<a onClick="register2()">
<img src="https://i.imgur.com/uomkVIL.png" width="200px" height="200px">
</a>
</div>
<input type="text" id="box" value="Click A Box">
There you go, you have two boxes that are images and can run a function when clicked.