HTML/CSS/JS - 如何在点击时更改图像和文本答案

【问题标题】：HTML/CSS/JS - How to change and image and text on clickHTML/CSS/JS - 如何在点击时更改图像和文本
【发布时间】：2016-11-25 11:52:24
【问题描述】：

当我点击图库中的不同图像时，如何让图像和图像下的文本交换？

我希望有 4 个缩略图图像在单击时会切换为放大图像，并且每个缩略图图像在放大图像下方显示不同的描述。我已经设法让图像交换，但我不知道从哪里开始文本部分。

我还希望在每张图片旁边都有标题/链接，可以点击这些标题/链接来更改图片和图片下方的文字。

代码在下面和这个 JSfiddle 链接中：https://jsfiddle.net/hzjk077t/

HTML

<html>

<head>
    <title> Locations </title> 
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="image_swap.js" type="text/javascript"></script>

</head>

<body>
<div id="header">
    <div id="branding">
        <img src="Images/logo.png">
    </div><!-- end of "logo" -->
    <div id="tagline">
    <p> Welcome to yourday.com - We hope you enjoy your visit! </p>

    </div><!-- end of "tagline" -->
</div><!-- end of "header" -->

<div id="bodycontent2">

    <div id="Thumbnails">
        <p>Below, we have a selection of vintage locations across Ireland and some information regarding each. 
        </br>Please take note of the location of your preference, and <a href="mailto:bookings@yourday.com">contact us</a>&nbspto to set up an appointment.
        <p>Select an image to enlarge it</p>
        <ul class="Thumbnails">
            <li><a href="slideshow/img1.jpg" title="location1"><img src="thumbnails/location1.jpg" alt="location1" /></a></li>
            <li><a href="slideshow/img2.jpg" title="location2"><img src="thumbnails/location2.jpg" alt="location2" /></a></li>
            <li><a href="slideshow/img3.jpg" title="location3"><img src="thumbnails/location3.jpg" alt="location3" /></a></li>
            <li><a href="slideshow/img4.jpg" title="location4"><img src="thumbnails/location4.jpg" alt="location4" /></a></li>
        </ul>
    </div><!--end of thumbnail div -->

    <div id="main-image">
        <img src="slideshow/img1.jpg" alt="Enlarged Image" id="the_image" />
    </div><!--end of main image div-->
</div><!--end of body content" -->


<div id="navigation">
<ul class="topnav" id="TopNav">
    <li><a href="home.html">Home</a></li>
    <li><a href="locations.html">Locations</a></li>
    <li><a href="booking.html">Booking</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="about.html">About</a></li>

    </li>
</ul>
</div> <!--end of "navigation" -->

<div id="footer">
  <p>Created by: Calvin Leong</p>
  <p>Contact information: <a href="mailto:calvin.leong@CLDesign.com">calvin.leong@CLDesign.com</a></p>
</div>

</body>
</html>

CSS

body {
        font-family: Verdana, Helvetic, Arial, sans-serif;
        font-size: 16px;
        background-color: #C8A2C8;
        line-height: 125%

}

/*Map - where we are*/
h1{
    position:absolute;
    top: 450px;
}

#map{
    position:absolute;
    top:500px;
}
h2{
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-weight: italic;

}

#navigation a{
    text-decoration: none;
}

.highlight {
    color: #339999;
    font-family: Georgia, Times, serif;
    font-style:italic:
}

#navigation {
    position: absolute;
    left: 0;
    top: 150px;
    width: 100%
}

 #bodycontent {
     position: absolute;
     top: 620px;
     width: 100%
 }

 #tagline {
     position: absolute;
     top: 200px;
 }

 #bodycontent2 {
    position: absolute;
    top: 250px;
    width: 100%
}

/* Navigation bar */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFB6C1;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #D3D3D3;}

/*Keeps footer at the bottom, no matter what size window*/
html{
    position:relative;
    min-height: 100%;
}

#footer{
    position: absolute;
    bottom: 0;
    top: 1000px;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    border-top: 2px solid #f2f2f2;
    border-width: 0 0 100% 0;
    border-color: gray;
}

/*Gallery settings*/
.galleryphoto {
    font-size: 65%;
    font-weight: bold;
    margin-top: 0;
    width: 430px;
    line-height: 1.4em;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid navy;
    margin-bottom: 10px;
}

#main-image {
        margin: 0.2em 0 0 22em;
        }

#thumbnails p {
        font-size: 80%;
        }

#thumbnails ul {
        list-style-type: none;
        }

#thumbnails li {
        display: block;
        padding: 5% 0 0 0;
        }

#thumbnails {
        width: 16em;
        border-right: maroon;
        border-width: 0 3px 0 3px;
        border-style: dotted solid double;
        padding: 0 1.5%;
        float: left;
        height: 31.5em;
        }

#thumbnails a img {
        border-style: none;
        border-width: 0;
        border-color: transparent;
        }

function swap_image() {
    var my_image = this.href;
    var the_image = document.getElementById("the_image");
    the_image.src = my_image;
    return false;
    }

function attach_handlers() {
    var div = document.getElementById("Thumbnails");
    var links = div.getElementsByTagName("a");

    for (var i=0; i < links.length; ++i)
        links[i].onclick = swap_image;
    }

window.onload = attach_handlers;

【问题讨论】：

标签： javascript html css

【解决方案1】：

这可以通过 jQuery 轻松实现。

JSFiddle

// When you click the image
$('#image1').on('click', function () {
    // Select a div matching the CSS selector '#image1text'
    // Then set the HTML to 'image text here'
    $('#image1text').html('image text here');
})

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
<img id="image1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg">
<div id="image1text"></div>

【讨论】：

您好，感谢您的帮助。所以对于 4 张图像，我可以将“image1text”更改为图像 2 等，然后它会更改为图像 2 和图像 2 文本？另外，是否可以在选择其他图像时将上一段文本消失并被新文本替换吗？
是的。如果您想这样做，只需执行：$("#imagetext1").html(' ')。这将用任何内容替换当前文本。如果这是正确的，请将其标记为未来观众的正确答案。
谢谢。我刚刚尝试在那里做，但它没有在放大的图像下显示图像文本。它仅在每个缩略图图像下显示。 link

【解决方案2】：

您可能希望使用叠加层而不是直接指向图像的链接。

function popup(imageURL)
{
  document.getElementById("image").src = imageURL;
  document.getElementById("overlay").style.display = "block";
  document.getElementById("caption").innerHTML = "Image is " + imageURL + ". You may put any HTML here as you like.";
}

<p>Here are some image thumbnails...</p>
<div style="display: table-row;">
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250?text=LOL" onclick="popup('http://placehold.it/200x250?text=LOL+Enlarged');">
  </div>
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250?text=A" onclick="popup('http://placehold.it/200x250?text=A+Enlarged');">
  </div>
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250?text=LOLOL" onclick="popup('http://placehold.it/200x250?text=LOLOL+Enlarged');">
  </div>
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250" onclick="popup('http://placehold.it/200x250');">
  </div>
</div>

<div id="overlay" style="position: fixed; top: 0; left: 0; width: calc(100% - 40px); height: calc(100% - 40px); opacity: 0.8; background-color: black; display: none; text-align: center; padding: 20px;">
  <img id="image">
  <br><br>
  <label id="caption" style="color: white;"></label>
</div>

我希望这会有所帮助。

PS：如果我没有回答问题，请告诉我...

【讨论】：

【解决方案3】：

首先，请原谅我的英语不好。

如果我理解正确，您想将 img 更改为您想要的已经点击了。

您链接中的“href”使用不正确。

如果您想将这些图像标题打印到图像上，您可以在图像或链接中创建一个属性，例如“数据位置”。

链接的 href 属性通常用于链接到网站 (href="https://www.google.com") 或您想要链接到该页面的楼层 (href="#floor1")。

这是我的演示。

https://jsbin.com/xolisefofi/edit?html,js,output 希望对你有帮助。

【讨论】：