I have an image like this:
How can I insert some input fields into the image?
It should be possible that the user click into the input fields (green boxes) of the image and enter some values?
-
1Please share your codeUmesh Aawte– Umesh Aawte2015-11-09 13:46:03 +00:00Commented Nov 9, 2015 at 13:46
-
1If your image has always the same size, there is way with absolute positioning. w3schools.com/css/css_positioning.aspWa Kai– Wa Kai2015-11-09 13:46:03 +00:00Commented Nov 9, 2015 at 13:46
Add a comment
|
5 Answers
Create div element with the dimensions of your image and set it's css position to relative. Then set the image's position as absolute and its coordinates 0,0. Then you can position all the checkboxes by absolute positioning as well.
By assuring that the wrapping div has position: relative;, you can position the checkboxes (and the image) from the border of the div.
HTML
<div id="wrapper">
<img src="...">
<input type="checkbox" style="position: absolute; top: 20px; left: 100px;">
<input type="checkbox" style="position: absolute; top: 50px; left: 200px;">
</div>
CSS
div#wrapper {
position: relative;
width: 400px;
height: 200px;
}
img {
position: absolute;
top: 0;
left: 0;
}
Comments
Use absolute position like:
HTML:
<img src="imageName.png" id="img" />
<input type="text" id="txt" />
CSS:
#txt{
position : absolute;
left : 200px;
top:150px;
}
#img{
position : relative;
}
Comments
Two solutions comes to my mind:
1 - Use some container (div, table) with width and height same as image and style like so:
position: relative;
background: url("https://i.sstatic.net/xyJet.png") no-repeat;
Then put input fields in this container with style (use different left and top for each input)
position: relative;
left: 100px;
top: 5px;
2 - In some container with position other than static (needs for positioning child elements with positions) put that image as img element and all input fields with style:
position: relative;
left: 0px;
top: 0px;
All you need is to position them all as you wish by changing left and top properties.
Comments
I think that you could achieve it by using css grid.
Using CSS grid you can overlap items easily.
Here is an example using CSS grid:
.container {
width: 800px;
height: 800px;
}
.gridContainer {
display: grid;
}
.img {
width: 100%;
grid-row: 1 / 4;
grid-column: 1 / 4;
object-fit: cover;
}
.testInput1 {
align-self: center;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.testInput2 {
align-self: center;
grid-row: 2 / 3;
grid-column: 2 / 3;
}
.testInput3 {
align-self: center;
grid-row: 3 / 4;
grid-column: 3 / 4;
}<div class="container">
<div class="gridContainer">
<img src="https://images.freeimages.com/images/large-previews/1c6/neon-blur-1-1172436.jpg" class="img" />
<div class="testInput1">
<input type="text" id="testInput1" value="test input 1" />
</div>
<div class="testInput2">
<input type="text" id="testInput2" value="test input 2" />
</div>
<div class="testInput3">
<input type="text" id="testInput3" value="test input 3" />
</div>
</div>
</div>
Comments
You can set your image as background to a div and add absolute positioned inputs over the div,
HTML
<div class="mydiv" >
<input type="text" class="fistinput" />
</div>
CSS
div.mydiv{
background-image:url('https://i.sstatic.net/xyJet.png');
height:447px;
width:591px;
}
.fistinput{
position:absolute;
top:120px;
left:200px;
width:50px;
}
Try FIDDLE
