Hello tout le monde

J'aimerai savoir s'il est possible en HTML qu'un champ de texte apparaisse quand une image est cliquée afin que je puisse ajouter une description pour cette image.

Quelqu'un sait il comment faire ? 

Je vous donne le code correspondant ci dessous.

Merci pour votre aide 

		<!-- SECTION: PORTFOLIO-->
		<div class="section-vcardbody section-page" id="page-portfolio">
			<div class="section-portfolio">

				<!-- Section title -->
	            <h2 class="section-title">Portfolio</h2>
	            <!-- /Section title -->

	            <!-- Projects list -->
				<div class="projects-list">

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p1.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p1.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Projet 1</h2>
									<!-- /project name -->
									<span class="see-more">CMS</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Project Title</h2>
									<!-- /project name -->
									<span class="see-more">Project Tags</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p3.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p3.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Project Title</h2>
									<!-- /project name -->
									<span class="see-more">Project Tags</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p4.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p4.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Project Title</h2>
									<!-- /project name -->
									<span class="see-more">Project Tags</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p5.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p5.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Project Title</h2>
									<!-- /project name -->
									<span class="see-more">Project Tags</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p6.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p6.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Project Title</h2>
									<!-- /project name -->
									<span class="see-more">Project Tags</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

					<!-- item -->
					<div class="project-item">
						<!-- ==> Put your thumbnail as a background -->
						<a href="img/portfolio/p7.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p7.jpg');">
							<!-- project-description -->
							<div class="project-description-wrapper">
								<div class="project-description">
									<!-- project name -->
									<h2 class="project-title">Project Title</h2>
									<!-- /project name -->
									<span class="see-more">Project Tags</span>
								</div>
							</div>
							<!-- /project-description -->
						</a>
					</div>			
					<!-- /item -->

Tu peux faire ca en javascript avec un truc du style

function creatInput(idImage){
   var input1 = $("<input>");
   input1.attr("name","descriptionImage"+idImage);
   $("#"+idImage).parent().append(input1);
}

<img id="monImg1" src="monImg1.png" onclick="creatInput('monImg1')">

Voilà, je vous laisse me corriger.

Bon après évidement pour enregistrer la description ect... j'imagine que tu devine que tu doit passer par une BDD + PHP

-
Edité par CodecadeMe 15 décembre 2017 à 17:45:05