We Keep Coding

How to automaticlly create an InputField, when a a position is clicked on a picture?

I am trying to display a highlighted circle when the user double clicks on a certain part of an image(which should be erasable if clicket wrong). If the wanted position is clicked i want to create an "ID" and next to it a simple Inputfield.
The Inputfields should be in a countainer/box which is scrollable.
How can I achieve this ?
here is a edited pic as example for what i hope to achieve:
till now i only did the ground work like bulding the header, footer and sidebar
#wrapper {
margin-left: auto;
margin-right: auto;
background-color: red;
width: 1000px;
height: 800px;
}
#header {
width: 100%;
height: 100px;
background-color: blue
}
#footer {
width: 100%;
height: 50px;
background-color: green;
clear: both;
}
#menue-right {
width: 300px;
height: 650px;
background-color: black;
float: right
}
#content {
width: 700px;
height: 650px;
background-color: yellow;
float: left;
}
#content-center {
width: 500px;
height: 400px;
background-color: darkorange;
margin: auto;
margin-top: 125px
}
#wundbild {
height: 400px
}
<div id="wrapper">
<div id="header">
<h1 style="color: white; text-align: center;padding-top: 25px;">Wundposition ermitteln</h1>
</div>
<div id="menue-right">
</div>
<div id="content">
<div id="content-center">
<img id="wundbild" src="https://i.stack.imgur.com/c3CDS.png">
</div>
</div>
<div id="footer">
</div>
</div>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide and display the same on new image?

i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.
<div class="grid-two imageandtext">
<figure>
<img src="assets/images/painting.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
<div class="caption1">
<p>Photography</p>
</div></div>
</figure>
</div>
it should display like below image
now it is working like this
https://jsfiddle.net/liza_susan/L8jyum77/

Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.
I wrapped the image in a label, and when clicked, it simply checks the input.
In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.
Updated fiddle
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption p {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
Based on a comment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).
With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid.
Updated fiddle
Stack snippet
.caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption span {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.image_grid {
display: inline-block;
padding-left: 25px;
}
.image_grid label {
position: relative;
display: inline-block;
}
.image_grid img {
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
</div>

How about adding an image when someone hovers over it.
i.e.
.image-thumbnail:hover {
background-image: <path to image>;
background-repeat: no-repeat;
}

How about this JQuery function:
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
.grid-two {
width: 50%;
display: inline;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #000;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline;
padding-left: 5px;
}
.absolute {
border: 1px solid black;
position: absolute;
left: 0px;
display: none;
width: 50%;
margin: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Painting</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
</figure>
</div>
JSFiddle

Force or Embed 7 images positioned Absolute into specific div?

so I am building a website, where users have their avatars loaded based on code that's given to JS function, it's 7 images all same size but different elements - Skin base, hair, eyes, mouth, shirt, shoes, pants.
They get loaded on page loading and they need to be stacked on top of each other.
Here is html:
<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level: </div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views: </div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages: </div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/></div>
<input type="button" id="sendPm" value="Send Message" name="sendPm"/>
</div>
<div id="AccountInfo">
<div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ." ". "(".$row['username'].")");?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
</div>
</div>
</div>
</body>
"LoadCharDiv()" is a JS function which just places images into div based on character code provided, don't think it's related but here it is anyway:
function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}
And here is my CSS on page:
*{
margin: 0px;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
}
body{
background-color: #111111;
margin: 1%;
}
#MainBody{
width: 60%;
margin-left: auto;
margin-right: auto;
height: 800px;
}
#AccountFrame{
width: 100%;
padding: 15px;
height: 100%;
background-color: #eeeeee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
#DataFrame{
font-size: 2.0vh;
padding: 15px;
background-color: #eeeeee;
border-radius-top: 4px;
width: 100%;
text-align: right;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
display: inline-block;
}
#AccountAvatar{
float: left;
width: 30%;
}
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
#sendPm{
width: 100%;
height: 5.0vh;
background-color: #0071ff;
border: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #1A1A1A;
font-size: 2.0vh;
}
#sendPm:hover{
background-color: #308CFF;
}
.DetailLabel{
display: inline-block;
width: 9.7vh;
color: #0071ff;
}
.DetailInput{
width: 40%;
display: inline;
}
.DetailObjects{
width: 100%;
display: inline-block;
padding: 1vh;
}
#AccountName{
color: #0071ff;
}
#AccountInfo{
width: 68%;
float: left;
font-size: 1.7vh;
padding: 1vh;
height: 100%;
}
#NameObject{
font-size: 3vh;
padding: 0px;
padding-left: 1vh;
}
As you can see in image, with current
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
Character is placed on side of page, I want it to be placed right above Send Message button, and stay there without floating around screen if page gets resized.
Here is what it should be like:
I am thinking perhaps there is a way to layer images on top of each other without position: absolute?
Thanks.
Tried setting Parent position to relative.
#AccountAvatar{
float: left;
height: 500px;
position: relative;
width: 30%;
}
#AccountAvatar img{
width: 60%;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
}
Character appears below button.
Any way to adjust him to be above button?

Your absolute positioning is fine however, absolute elements are not in the normal content flow so you need to add a height to the container of the absolute elements.
http://jsfiddle.net/rwh3emp2/1/
#AvatarImgFrame is the container of the image
#AvatarImgFrame {
height: 230px;
}
You can remove the height from #AccountAvatar

Absolute Positioned DIVs are not visible

I have two DIVs (previous-image and next-image) that are absolutely positioned. Here is my structure:
<div id="sheet" onclick="close()">
<div id="popover">
<div id="previous-image" onclick="previous()">«</div>
<img src="http://cynthiawoodyardlandscapedesign.com/watermark.php?src=images/main1.jpg&x=0&y=470&opacity=50" id="popover-image" />
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Link: http://cynthiawoodyardlandscapedesign.com/
Here is my CSS:
#next-image {
position: absolute;
right: -100px;
top: 250px;
text-align: center;
line-height: 50px;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
z-index: 200;
background: transparent;
color: white;
}
#previous-image {
position: absolute;
left: -100px;
top: 250px;
text-align: center;
line-height: 50px;
z-index: 200;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
background: transparent;
color: white;
}
My JavaScript:
$("#sheet").click(function() {
$("#sheet").animate({
opacity: 0
}, 200, function() {
$("#sheet").hide();
});
});

Edit
Seems you had omitted the actual HTML of your #sheet element, which has a display: none set on the element, and therefore all is invisible inside the sheet element, including the arrows.
Your actual HTML on your site is:
<div id="sheet" onclick="close()" style="display: none;">
<div id="popover" onclick="close()">
<div id="previous-image" onclick="previous()">«</div>
<img src="watermark.php?src=images/main1.jpg&x=0&y=420&opactity=50"
id="popover-image" onclick="close()">
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Removing that style="display: none;" will show the arrows again.