Quiero hacer una función que pueda mostrar el alt de una imagen.
Estoy usando bootstrap e hice una función que muestra una imagen cuando hago clic en la miniatura. Pero también quiero que imprima o muestre el alt debajo de la imagen cuando hago clic en la miniatura.
Haré lo mejor que pueda, pero si me pueden ayudar, ¡estaría muy agradecido!
Aquí está mi código:
function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = imgs.src; //imgText.innerHTML = imgs.alt; expandImg.parentElement.style.display = "block"; } .expandedImg .img { max-width: 150px; } .thumbnailContainer { overflow-y: none; width: 180px; height: 40vh; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!--START Sidebar --> <div class="row my-row"> <div class="col-md-3 "> <!--Thumbnail START--> <div class="thumbnailContainer"> <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="myFunction(this);"> </div> <!--Thumbnail END--> </div> <div class="col-md-9 "> <!--main content--> <div class="container expandedImgSize d-flex justify-content-center "> <span onclick="this.parentElement.style.display='none'"></span> <img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG"> <div> <!--here the caption/text below the image shown after a click--> </div> </div>¡Gracias de antemano por ustedes!
De hecho, pude crearlo sin usar la identificación; dado que está pasando "esto" a su función, todo lo que necesita hacer es crear un nuevo elemento y hacer img.parentNode.insertBefore(newNode, img.nextSibling); . Dicho esto, podría ser mejor agregar una identificación en su lugar. Aquí hay un ejemplo de trabajo:
function showAlt(imgNode) { const altNode = document.createElement("p"); altNode.innerHTML = imgNode.alt; imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <section class="container"> <div class="thumbnailContainer"> <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="showAlt(this);"> </div> </section> </body> </html>y en caso de que quiera jugar un poco con el código, aquí hay un JSFiddle: https://jsfiddle.net/AJax201222/6dz18hwa/13/
Como sugirió imvain2 en los comentarios, solo necesita agregar la id al div y descomentar imgText.innerHTML = imgs.alt; línea y debería funcionar.
function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = imgs.src; imgText.innerHTML = imgs.alt; expandImg.parentElement.style.display = "block"; } .expandedImg .img { max-width: 150px; } .thumbnailContainer { overflow-y: none; width: 180px; height: 40vh; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/> <!--START Sidebar --> <div class="row my-row"> <div class="col-md-3 "> <!--Thumbnail START--> <div class="thumbnailContainer"> <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="myFunction(this);"> </div> <!--Thumbnail END--> </div> <div class="col-md-9 "> <!--main content--> <div class="container expandedImgSize d-flex justify-content-center "> <span onclick="this.parentElement.style.display='none'"></span> <img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG"> <div id="imgtext"> <!--here the caption/text below the image shown after a click--> </div> </div> </div> </div>