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