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>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>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>
<div> not <img> tag and I can't figure it out.
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>
