Here is an image that I have:
https://i.sstatic.net/wHNk1.png
Is there a way to add input fields to this image?
I want the user to be able to click on the input fields (green boxes) within the image and enter values. How can I achieve this?
Here is an image that I have:
https://i.sstatic.net/wHNk1.png
Is there a way to add input fields to this image?
I want the user to be able to click on the input fields (green boxes) within the image and enter values. How can I achieve this?
Start by creating a div element with the same dimensions as your image and set its css position to relative. Next, adjust the image's position to absolute with coordinates 0,0. You can then position all checkboxes using absolute positioning within this div.
Make sure that the containing div has a style of position: relative;, which allows you to position the checkboxes (and the image) based on 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;
}
To implement the use of absolute position, follow these steps:
HTML structure:
<img src="picture.png" id="image" />
<input type="text" id="textbox" />
CSS style:
#textbox{
position : absolute;
left : 300px;
top:100px;
}
#image{
position : relative;
}
Here are two possible solutions that I have in mind:
1 - You can create a container (such as a div or table) with the same width and height as the image, and style it like this:
position: relative;
background: url("https://i.sstatic.net/xyJet.png") no-repeat;
Then, place input fields inside this container with different left and top values for each input field.
position: relative;
left: 100px;
top: 5px;
2 - Alternatively, you can place the image as an img element within a container with a non-static position. Then, style all input fields like this:
position: relative;
left: 0px;
top: 0px;
You can then position them according to your preference by adjusting the left and top properties.
I believe utilizing css grid could help you accomplish this.
By implementing CSS grid, it becomes easy to have overlapping elements.
Below is a demonstration 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>One way to customize the appearance of a div is by using an image as its background and positioning inputs over it.
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;
}
Give it a try on FIDDLE
After developing a WordPress plugin, I encountered an issue while working with div elements. My goal is to retrieve the content of a specific div using the following code snippet: var archive = j( "div.page2" ).html(); console.log(archive); Everything wo ...
Having trouble unchecking a checkbox? In my HTML (PHP) code, I have the following: <div class="row"> <div class="col-md-12 pr-1"> <label>Modele</label> <div class="form-group"> <div class=" ...
Is it possible to cluster these selectors together in normal CSS like below? .container { .header {...} .content p {...} .button-wrapper .button {...} .footer {...} } Or do I need to use Sass in order to achieve this grouping? ...
<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...
I was wondering if Django has the capability to access image files located outside of the project directory. For example, let's say I have an image in "/home/arnav/Documents/covers" and my Django project directory is "/home/arnav/project". Is it possi ...
Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...
Link to code on CodePen: CodePen Link When you visit the provided page and enter "joe" into the search box, choose one of the two Joes that appear. Try to then select text in the search box or use backspace to delete only the last character. You will no ...
I'm feeling lost when it comes to editing WordPress themes. As a new user of WordPress, I have a custom theme that only imports the style for this theme in its main style.css file like this: @import url('assets/stylesheets/app.css'); I&apo ...
I'm trying to append data to the closest li element when clicked using jQuery, but I've tried next, parent, closest, find and nothing seems to be working. Here is a link to my jsfiddle showcasing the issue: http://jsfiddle.net/kT3Rb/47/ This i ...
Within my frontend html, I am looking to include an img element with the source link '/uploads/profilePicture'. In my node/express setup, I need to verify the user's authentication, retrieve their profile picture from the filesystem, and ret ...
Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...
Is there a way to determine the amount of bytes downloaded by the browser on an HTML+JS+CSS page with a set size during page load? I am looking for this information in order to display a meaningful progress bar to the user, where the progress advances bas ...
[text area control has a new line break that needs to be removed and replaced with the remaining string like image two][1] This image illustrates ...
Visit my website: www.bharatpharmatech.com I have implemented my code using Next.js Here is the schema I am utilizing: { "@context": "https://schema.org/", "@type": "WebSite", "name": "Bharat Pharmate ...
Although I typically avoid using tables, I am struggling to find a better solution for setting up a page layout with a search bar, three buttons, and two hyperlinks stacked on top of each other. The challenge is to have this control centered on the webpage ...
Looking to extract data from a JSON file and populate two dropdown lists in HTML using AJAX and JavaScript. The goal is to have the data displayed in the first dropdown list, and when an option is selected, the related data should be shown in the second dr ...
Imagine a scenario where content is structured as follows: <h2>George Epworth</h2> <h3>Director</h3> <p>Content Content Content</p> What if the descriptive part of the h2 is actually more closely related to the h2 itse ...
I have a database that consists of 5 tables, with one dedicated to storing IDs. My goal is to establish links between this ID table and the other tables in order to display their corresponding names. For instance: ask Genre: Action This query should retu ...
I won't bore you with the details, but I'm trying to overlay image links on top of a background image in specific positions. Despite my best efforts, the images are not changing no matter how much I tweak their parameters. Here is the HTML code: ...
Currently, I am in the process of automating a web application using Selenium WebDriver. The unique challenge I have encountered is related to the behavior of a dropdown menu causing page elements to hide under a floating menu. Interestingly, this issue on ...