2
当我点击图片中的不同图片时，如何获取图片和图片下方的文字以进行切换？HTML/CSS/JS - 如何在点击时改变图片和文字
我想要有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:[email protected]">contact us</a> to 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:[email protected]">[email protected]</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;
嗨，感谢您的帮助。因此，对于4张图片，我可以将“image1text”更改为图片2等等，它会变成图片2和图片2文字？另外，是否有可能让先前的文字消失，并在选择不同的图像时被新文字取代？ –
是的。如果你想这样做，只需要：$（“＃imagetext1”）。html（''）。没有任何东西取代当前的文字。如果这是正确的，请将其标记为未来观众的正确答案。 –
谢谢。我只是试图在那里做，但它不显示放大图像下的图像文本。它只在每个缩略图图像下显示。 [链接]（https://jsfiddle.net/0fk2sn28/） –