Hello I am trying to add text to the picture if you click on it. At this moment if you click on a picture only Orange is displayed. What I would like to do is to add some text under the image when clicked only. Could somebody please help?

<a href="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
    <img alt="Qries" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
         width=150" height="70">
</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Something like this?

const res = document.getElementById("res");
document.querySelector("a").addEventListener("click", function(e) {
 e.preventDefault(); //stop link
  const tgt = e.target.closest("a");
  const img = tgt.querySelector("img")
  const text = img.alt;
  const src=img.src
  res.innerHTML = `<div style="text-align:center"><img src="${src}" /><br><span>${text}</span></div>`
  res.hidden=false;
})

 <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
   <img alt="Qries Nice Grapefruit" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" 
         width="150" height="70" /></a>
<div id="res" hidden></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Or this if a background image

const res = document.getElementById("res");
document.querySelector("div").addEventListener("click", function(e) {
  const src = this.style.backgroundImage.split('"')[1]

  const text = this.title;
  res.innerHTML = `<div style="text-align:center"><img src="${src}" /><br><span>${text}</span></div>`
  res.hidden = false;
})

<div title="Qries Nice Grapefruit" style="background-image:url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg');     width:150px; height:70px" /></div>
<div id="res" hidden></div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You Add a Little of css and Javascript to trick it for you

i have carefully added some comments to help you out in the process without much stress

//First i added some id to your html code to make it easier without just jumping to new files or opening some new links to make it bulky

var click = document.getElementById("image-to-click");
var text = document.getElementById("text-up");

//once the image is clicked, them the magic begins
click.onclick = function(){
  text.style.display = "block";
}

#text-up{
position: absolute; 
color: white;
padding: 40px;
display: none;
}


/* first, i have to remove the href to prevent it from opening another file on click. 
second, i added a text to display on the overlay */

<a id="image-to-click">
<span id="text-up">Text Ontop of the picture</span>
    <img alt="Qries" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
         width=350" height="150">
</a>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>