HTML Code for an Image to reveal text

MohammedW · February 21, 2019

Hi

I am creating a website in Godaddy where I have the functionality to add html coding.

I want to insert an image, and when this image is clicked on, it displays text in the location of the image, could anyone assist with this query?

Many Thanks

Mohammed

Funce · February 24, 2019

Were you looking for something like this?

<!DOCTYPE html>
<html>
<style>

img {
  width: 500px;
}

.image-caption {
  display: none;
  width: 500px;
  background-color: cyan;
}
</style>
<body>
  <div class="image-caption-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"/>
    <div class="image-caption">
    This is a cat
    </div>
  </div>
  <div class="image-caption-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"/>
    <div class="image-caption">
    This is a cat
    </div>
  </div>
</body>

<script>

function handleClick() {
  console.log(this.children[1]);
  toggleDisplay.call(this.children[1])
}

function toggleDisplay() {
  var x = this;
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

window.onload = function() {
  var containers = document.querySelectorAll(".image-caption-container");
  containers.forEach(function (container) {
    container.onclick = handleClick;
  });
};


</script>
</html>

Sign In

HTML Code for an Image to reveal text

Recommended Posts

MohammedW

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity