1. 首页
  2. 问题列表
  3. HTML/CSS/JS-如何在单击时更改图像和文本
提问者：小点点

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


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

我想有4个缩略图图像交换到一个放大的图像时，点击，每显示一个不同的描述下的放大的每一个图像。我已经设法使图像交换，但我不知道从哪里开始与文本部分。

我也希望有标题/链接旁边的每一个图像，可以点击改变图像和文本下的图像。

代码在下面和这个JSfiddle链接中:https://jsfidle.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;

共1个答案

匿名用户

这可以通过jQuery轻松实现。

JsFiddle

null

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

相关问题