Question

当我点击图库中的其他图片时，如何让图像和图像下的文字交换？

我希望有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;
        }

JS

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;

Answer 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>

Answer 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：如果我没有回答这个问题，请告诉我......

Answer 3

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

如果我理解正确，你想将img改为你的那个点击了。

链接中的“href”是不正常使用的。

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

link的href属性通常用于链接到网站（href =“https://www.google.com”）或您想要的此页面的地板（href =“＃floor1”）。

这是我的演示。

https://jsbin.com/xolisefofi/edit?html,js,output 我希望它可以帮助你。

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

3 个答案: