如何添加描述以在單擊圖像時顯示？

Question

當我點擊一張圖片時，它會在一個更大的圖片框中打開。 當我打開特定圖像時，我想為在圖像框下打開的每個圖像添加描述。 如圖所示，我想在單擊圖像時在較大的圖像框下顯示對該特定圖像的描述。

 $(document).ready(function() { $(".Thumbnail a").click(function(e) { e.preventDefault(); $(".imgBox img ").attr("src", $(this).attr("href")); }); }); document.addEventListener("mousemove", showImage); document.addEventListener("mouseleave", showImage); document.addEventListener("scroll", showImage); function showImage() { var items = document.getElementById("thumbnail").getElementsByTagName("li"); Array.from(items).forEach(function(e) { if (e.getElementsByTagName("img")[0].matches(":hover")) { //put whatever you want in here e.style.backgroundColor = "blue"; } else { //likewise put whatever you want in here e.style.backgroundColor = "red"; } }); }

 <body> <div class="imgBox"><img src="" alt="" /></div> <ul class="Thumbnail" id="thumbnail"> <li> <a href="img1.jpg" target="imgBox"><img src="img1.jpg" width="120px" /></a> </li> <li> <a href="img2.jpg" target="imgBox"><img src="img2.jpg" width="120px" /></a> </li> <li> <a href="img3.jpg" target="imgBox"><img src="img3.jpg" width="120px" /></a> </li> <li> <a href="img4.jpg" target="imgBox"><img src="img4.jpg" width="120px" /></a> </li> <li> <a href="img5.jpg" target="imgBox"><img src="img5.jpg" width="120px" /></a> </li> </ul> </body> <script src="https://code.jquery.com/jquery-2.2.4.js"></script>

Answer 1

我傾向於為此使用figure ，因為它為圖像和標題提供了一個簡潔的包裝。

 // Cache a container, and add a listener to it const container = document.querySelector('div'); container.addEventListener('click', handleClick, false); function handleClick(e) { // If the clicked element is an image if (e.target.matches('img')) { // Get its parentNode (figure) const parent = e.target.parentNode; // Get the `figcaption` const caption = parent.querySelector('figcaption'); // Toggle its `showcaption` class caption.classList.toggle('showcaption'); } }

 figure { display: inline-block; } figure img:hover { cursor: pointer; } figcaption { visibility: hidden; }.showcaption { visibility: visible; }

 <div> <figure> <img src="https://dummyimage.com/100x100/000/fff" alt="Dummy image"> <figcaption>Dummy image</figcaption> </figure> <figure> <img src="https://dummyimage.com/100x100/f44/000" alt="Dummy image 2"> <figcaption>Dummy image 2</figcaption> </figure> </div>

如何添加描述以在單擊圖像時顯示？

問題描述

1 個解決方案

解決方案1
0 2022-03-22 16:49:41

如何添加描述以在單擊圖像時顯示？

問題描述

1 個解決方案

解決方案1 0 2022-03-22 16:49:41

解決方案1
0 2022-03-22 16:49:41