Question 265752 in Html Question posted in
Some basic documentation can be found here.

Html – I want ot add text below 7 images but i don't know how

I have 7 images of 7 different characters next to each other, (in a row), and I want to add text below them, I want the text to change depending on the image I click.
Here is my code:

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="style.css">
    <title>Cine</title>
    </head>

    <body >

             
            <img class="personajes_edge"src="Imagenes/Personaje1.jpg" alt="">
            <img class="personajes_edge"src="Imagenes/personaje2_edge.jpg" alt="">
            <img class="personajes_edge"src="Imagenes/personaje3_edge.jpg" alt="">
            <img class="personajes_edge"src="Imagenes/personaje4_edge.jpg" alt="">
            <img class="personajes_edge"src="Imagenes/personaje5_edge.jpg" alt="">
            <img class="personajes_edge"src="Imagenes/personaje6_edge.jpg" alt="">
            <img class="personajes_edge"src="Imagenes/personaje7_edge.jpg" alt="">


            <p>Lorem ipsum dolor sit amet </p>
        
  

    </body>

    </html>
Tags:

2

Answers


  1. 0

    Try this:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Cine</title>
    <script>
        function changeText(imageNumber) {
            var text = document.getElementById("text");
            switch (imageNumber) {
                case 1:
                    text.innerHTML = "Text for Image 1";
                    break;
                case 2:
                    text.innerHTML = "Text for Image 2";
                    break;
                case 3:
                    text.innerHTML = "Text for Image 3";
                    break;
                case 4:
                    text.innerHTML = "Text for Image 4";
                    break;
                case 5:
                    text.innerHTML = "Text for Image 5";
                    break;
                case 6:
                    text.innerHTML = "Text for Image 6";
                    break;
                case 7:
                    text.innerHTML = "Text for Image 7";
                    break;
                default:
                    text.innerHTML = "Default Text";
                    break;
            }
        }
    </script>
</head>
<body>
    <img class="personajes_edge" src="https://picsum.photos/50" alt="" onclick="changeText(1)">
    <img class="personajes_edge" src="https://picsum.photos/51" alt="" onclick="changeText(2)">
    <img class="personajes_edge" src="https://picsum.photos/52" alt="" onclick="changeText(3)">
    <img class="personajes_edge" src="https://picsum.photos/53" alt="" onclick="changeText(4)">
    <img class="personajes_edge" src="https://picsum.photos/54" alt="" onclick="changeText(5)">
    <img class="personajes_edge" src="https://picsum.photos/55" alt="" onclick="changeText(6)">
    <img class="personajes_edge" src="https://picsum.photos/56" alt="" onclick="changeText(7)">

    <p id="text">Default Text</p>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Store the desired text inside the IMG’s alt attribute (which is needed anyways for A11Y).
    On click, populate the description element from that alt attribute value:

    const elsImages = document.querySelectorAll(".personajes_edge");
const elImgDesc = document.querySelector("#img-desc");

const showDesc = (elImg) => {
  elsImages.forEach(elI => elI.classList.toggle("is-active", elI === elImg));
  elImgDesc.textContent = elImg.getAttribute("alt");
};

elsImages.forEach((elImg) => {
  elImg.addEventListener("click", () => showDesc(elImg));
});
    .personajes_edge {
  cursor: pointer;
  transition: 0.3s;
} 
.personajes_edge.is-active {
  scale: 1.1;
  box-shadow: 0 0.2rem 1rem #0008;
}
    <img class="personajes_edge" src="//picsum.photos/80" alt="Some image description">
<img class="personajes_edge" src="//picsum.photos/81" alt="Lorem ipsum">
<img class="personajes_edge" src="//picsum.photos/82" alt="Dolor sit amet">
<img class="personajes_edge" src="//picsum.photos/83" alt="4 Stack Overflow">
<img class="personajes_edge" src="//picsum.photos/84" alt="Consectetur adipiscing">
<img class="personajes_edge" src="//picsum.photos/85" alt="Elit consequenti">
<img class="personajes_edge" src="//picsum.photos/86" alt="Forme adeo sempras">

<p id="img-desc">Lorem ipsum dolor sit amet </p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search